diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index a83aa79..da79b08 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -107,7 +107,7 @@ _colorMatrix(matrix) { // Create a Float32 Array and normalize the offset component to 0-1 - let m = new Float32Array(matrix); + const m = new Float32Array(matrix); m[4] /= 255; m[9] /= 255; m[14] /= 255; @@ -124,7 +124,7 @@ */ brightness(b, multiply) { - let matrix = [ + const matrix = [ b, 0, 0, 0, 0, 0, b, 0, 0, 0, 0, 0, b, 0, 0, @@ -142,7 +142,7 @@ */ greyscale(scale, multiply) { - let matrix = [ + const matrix = [ scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, @@ -160,7 +160,7 @@ */ blackAndWhite(multiply) { - let matrix = [ + const matrix = [ 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, @@ -180,7 +180,7 @@ { rotation = (rotation || 0) / 180 * Math.PI; - let cosR = Math.cos(rotation), + const cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; @@ -197,22 +197,22 @@ see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - let w = 1/3, sqrW = sqrt(w);//weight is + const w = 1/3, sqrW = sqrt(w);//weight is - let a00 = cosR + (1.0 - cosR) * w; - let a01 = w * (1.0 - cosR) - sqrW * sinR; - let a02 = w * (1.0 - cosR) + sqrW * sinR; + const a00 = cosR + (1.0 - cosR) * w; + const a01 = w * (1.0 - cosR) - sqrW * sinR; + const a02 = w * (1.0 - cosR) + sqrW * sinR; - let a10 = w * (1.0 - cosR) + sqrW * sinR; - let a11 = cosR + w*(1.0 - cosR); - let a12 = w * (1.0 - cosR) - sqrW * sinR; + const a10 = w * (1.0 - cosR) + sqrW * sinR; + const a11 = cosR + w*(1.0 - cosR); + const a12 = w * (1.0 - cosR) - sqrW * sinR; - let a20 = w * (1.0 - cosR) - sqrW * sinR; - let a21 = w * (1.0 - cosR) + sqrW * sinR; - let a22 = cosR + w * (1.0 - cosR); + const a20 = w * (1.0 - cosR) - sqrW * sinR; + const a21 = w * (1.0 - cosR) + sqrW * sinR; + const a22 = cosR + w * (1.0 - cosR); - let matrix = [ + const matrix = [ a00, a01, a02, 0, 0, a10, a11, a12, 0, 0, a20, a21, a22, 0, 0, @@ -233,10 +233,10 @@ */ contrast(amount, multiply) { - let v = (amount || 0) + 1; - let o = -128 * (v - 1); + const v = (amount || 0) + 1; + const o = -128 * (v - 1); - let matrix = [ + const matrix = [ v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, @@ -255,10 +255,10 @@ */ saturate(amount, multiply) { - let x = (amount || 0) * 2 / 3 + 1; - let y = ((x - 1) * -0.5); + const x = (amount || 0) * 2 / 3 + 1; + const y = ((x - 1) * -0.5); - let matrix = [ + const matrix = [ x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, @@ -286,7 +286,7 @@ */ negative(multiply) { - let matrix = [ + const matrix = [ 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, @@ -303,7 +303,7 @@ */ sepia(multiply) { - let matrix = [ + const matrix = [ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, @@ -320,7 +320,7 @@ */ technicolor(multiply) { - let matrix = [ + const matrix = [ 1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138, @@ -337,7 +337,7 @@ */ polaroid(multiply) { - let matrix = [ + const matrix = [ 1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, @@ -354,7 +354,7 @@ */ toBGR(multiply) { - let matrix = [ + const matrix = [ 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, @@ -371,7 +371,7 @@ */ kodachrome(multiply) { - let matrix = [ + const matrix = [ 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, @@ -388,7 +388,7 @@ */ browni(multiply) { - let matrix = [ + const matrix = [ 0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283, @@ -405,7 +405,7 @@ */ vintage(multiply) { - let matrix = [ + const matrix = [ 0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123, 0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591, 0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296, @@ -432,15 +432,15 @@ lightColor = lightColor || 0xFFE580; darkColor = darkColor || 0x338000; - let lR = ((lightColor >> 16) & 0xFF) / 255; - let lG = ((lightColor >> 8) & 0xFF) / 255; - let lB = (lightColor & 0xFF) / 255; + const lR = ((lightColor >> 16) & 0xFF) / 255; + const lG = ((lightColor >> 8) & 0xFF) / 255; + const lB = (lightColor & 0xFF) / 255; - let dR = ((darkColor >> 16) & 0xFF) / 255; - let dG = ((darkColor >> 8) & 0xFF) / 255; - let dB = (darkColor & 0xFF) / 255; + const dR = ((darkColor >> 16) & 0xFF) / 255; + const dG = ((darkColor >> 8) & 0xFF) / 255; + const dB = (darkColor & 0xFF) / 255; - let matrix = [ + const matrix = [ 0.3, 0.59, 0.11, 0, 0, lR, lG, lB, desaturation, 0, dR, dG, dB, toned, 0, @@ -459,7 +459,7 @@ night(intensity, multiply) { intensity = intensity || 0.1; - let matrix = [ + const matrix = [ intensity * ( -2.0), -intensity, 0, 0, 0, -intensity, 0, intensity, 0, 0, 0, intensity, intensity * 2.0, 0, 0, @@ -480,7 +480,7 @@ */ predator(amount, multiply) { - let matrix = [ + const matrix = [ 11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount, -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount, -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount, @@ -500,7 +500,7 @@ */ lsd(multiply) { - let matrix = [ + const matrix = [ 2, -0.4, 0.5, 0, 0, -0.5, 2, -0.4, 0, 0, -0.4, -0.5, 3, 0, 0, @@ -516,7 +516,7 @@ */ reset() { - let matrix = [ + const matrix = [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, @@ -546,4 +546,4 @@ //Americanized alias ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale; -export default ColorMatrixFilter; \ No newline at end of file +export default ColorMatrixFilter; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index a83aa79..da79b08 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -107,7 +107,7 @@ _colorMatrix(matrix) { // Create a Float32 Array and normalize the offset component to 0-1 - let m = new Float32Array(matrix); + const m = new Float32Array(matrix); m[4] /= 255; m[9] /= 255; m[14] /= 255; @@ -124,7 +124,7 @@ */ brightness(b, multiply) { - let matrix = [ + const matrix = [ b, 0, 0, 0, 0, 0, b, 0, 0, 0, 0, 0, b, 0, 0, @@ -142,7 +142,7 @@ */ greyscale(scale, multiply) { - let matrix = [ + const matrix = [ scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, @@ -160,7 +160,7 @@ */ blackAndWhite(multiply) { - let matrix = [ + const matrix = [ 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, @@ -180,7 +180,7 @@ { rotation = (rotation || 0) / 180 * Math.PI; - let cosR = Math.cos(rotation), + const cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; @@ -197,22 +197,22 @@ see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - let w = 1/3, sqrW = sqrt(w);//weight is + const w = 1/3, sqrW = sqrt(w);//weight is - let a00 = cosR + (1.0 - cosR) * w; - let a01 = w * (1.0 - cosR) - sqrW * sinR; - let a02 = w * (1.0 - cosR) + sqrW * sinR; + const a00 = cosR + (1.0 - cosR) * w; + const a01 = w * (1.0 - cosR) - sqrW * sinR; + const a02 = w * (1.0 - cosR) + sqrW * sinR; - let a10 = w * (1.0 - cosR) + sqrW * sinR; - let a11 = cosR + w*(1.0 - cosR); - let a12 = w * (1.0 - cosR) - sqrW * sinR; + const a10 = w * (1.0 - cosR) + sqrW * sinR; + const a11 = cosR + w*(1.0 - cosR); + const a12 = w * (1.0 - cosR) - sqrW * sinR; - let a20 = w * (1.0 - cosR) - sqrW * sinR; - let a21 = w * (1.0 - cosR) + sqrW * sinR; - let a22 = cosR + w * (1.0 - cosR); + const a20 = w * (1.0 - cosR) - sqrW * sinR; + const a21 = w * (1.0 - cosR) + sqrW * sinR; + const a22 = cosR + w * (1.0 - cosR); - let matrix = [ + const matrix = [ a00, a01, a02, 0, 0, a10, a11, a12, 0, 0, a20, a21, a22, 0, 0, @@ -233,10 +233,10 @@ */ contrast(amount, multiply) { - let v = (amount || 0) + 1; - let o = -128 * (v - 1); + const v = (amount || 0) + 1; + const o = -128 * (v - 1); - let matrix = [ + const matrix = [ v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, @@ -255,10 +255,10 @@ */ saturate(amount, multiply) { - let x = (amount || 0) * 2 / 3 + 1; - let y = ((x - 1) * -0.5); + const x = (amount || 0) * 2 / 3 + 1; + const y = ((x - 1) * -0.5); - let matrix = [ + const matrix = [ x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, @@ -286,7 +286,7 @@ */ negative(multiply) { - let matrix = [ + const matrix = [ 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, @@ -303,7 +303,7 @@ */ sepia(multiply) { - let matrix = [ + const matrix = [ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, @@ -320,7 +320,7 @@ */ technicolor(multiply) { - let matrix = [ + const matrix = [ 1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138, @@ -337,7 +337,7 @@ */ polaroid(multiply) { - let matrix = [ + const matrix = [ 1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, @@ -354,7 +354,7 @@ */ toBGR(multiply) { - let matrix = [ + const matrix = [ 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, @@ -371,7 +371,7 @@ */ kodachrome(multiply) { - let matrix = [ + const matrix = [ 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, @@ -388,7 +388,7 @@ */ browni(multiply) { - let matrix = [ + const matrix = [ 0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283, @@ -405,7 +405,7 @@ */ vintage(multiply) { - let matrix = [ + const matrix = [ 0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123, 0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591, 0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296, @@ -432,15 +432,15 @@ lightColor = lightColor || 0xFFE580; darkColor = darkColor || 0x338000; - let lR = ((lightColor >> 16) & 0xFF) / 255; - let lG = ((lightColor >> 8) & 0xFF) / 255; - let lB = (lightColor & 0xFF) / 255; + const lR = ((lightColor >> 16) & 0xFF) / 255; + const lG = ((lightColor >> 8) & 0xFF) / 255; + const lB = (lightColor & 0xFF) / 255; - let dR = ((darkColor >> 16) & 0xFF) / 255; - let dG = ((darkColor >> 8) & 0xFF) / 255; - let dB = (darkColor & 0xFF) / 255; + const dR = ((darkColor >> 16) & 0xFF) / 255; + const dG = ((darkColor >> 8) & 0xFF) / 255; + const dB = (darkColor & 0xFF) / 255; - let matrix = [ + const matrix = [ 0.3, 0.59, 0.11, 0, 0, lR, lG, lB, desaturation, 0, dR, dG, dB, toned, 0, @@ -459,7 +459,7 @@ night(intensity, multiply) { intensity = intensity || 0.1; - let matrix = [ + const matrix = [ intensity * ( -2.0), -intensity, 0, 0, 0, -intensity, 0, intensity, 0, 0, 0, intensity, intensity * 2.0, 0, 0, @@ -480,7 +480,7 @@ */ predator(amount, multiply) { - let matrix = [ + const matrix = [ 11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount, -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount, -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount, @@ -500,7 +500,7 @@ */ lsd(multiply) { - let matrix = [ + const matrix = [ 2, -0.4, 0.5, 0, 0, -0.5, 2, -0.4, 0, 0, -0.4, -0.5, 3, 0, 0, @@ -516,7 +516,7 @@ */ reset() { - let matrix = [ + const matrix = [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, @@ -546,4 +546,4 @@ //Americanized alias ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale; -export default ColorMatrixFilter; \ No newline at end of file +export default ColorMatrixFilter; diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index d222540..862acc9 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -16,7 +16,7 @@ { constructor(sprite, scale) { - let maskMatrix = new core.Matrix(); + const maskMatrix = new core.Matrix(); sprite.renderable = false; super( @@ -45,7 +45,7 @@ apply(filterManager, input, output) { - let ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); + const ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; @@ -71,4 +71,4 @@ } } -export default DisplacementFilter; \ No newline at end of file +export default DisplacementFilter; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index a83aa79..da79b08 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -107,7 +107,7 @@ _colorMatrix(matrix) { // Create a Float32 Array and normalize the offset component to 0-1 - let m = new Float32Array(matrix); + const m = new Float32Array(matrix); m[4] /= 255; m[9] /= 255; m[14] /= 255; @@ -124,7 +124,7 @@ */ brightness(b, multiply) { - let matrix = [ + const matrix = [ b, 0, 0, 0, 0, 0, b, 0, 0, 0, 0, 0, b, 0, 0, @@ -142,7 +142,7 @@ */ greyscale(scale, multiply) { - let matrix = [ + const matrix = [ scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, @@ -160,7 +160,7 @@ */ blackAndWhite(multiply) { - let matrix = [ + const matrix = [ 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, @@ -180,7 +180,7 @@ { rotation = (rotation || 0) / 180 * Math.PI; - let cosR = Math.cos(rotation), + const cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; @@ -197,22 +197,22 @@ see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - let w = 1/3, sqrW = sqrt(w);//weight is + const w = 1/3, sqrW = sqrt(w);//weight is - let a00 = cosR + (1.0 - cosR) * w; - let a01 = w * (1.0 - cosR) - sqrW * sinR; - let a02 = w * (1.0 - cosR) + sqrW * sinR; + const a00 = cosR + (1.0 - cosR) * w; + const a01 = w * (1.0 - cosR) - sqrW * sinR; + const a02 = w * (1.0 - cosR) + sqrW * sinR; - let a10 = w * (1.0 - cosR) + sqrW * sinR; - let a11 = cosR + w*(1.0 - cosR); - let a12 = w * (1.0 - cosR) - sqrW * sinR; + const a10 = w * (1.0 - cosR) + sqrW * sinR; + const a11 = cosR + w*(1.0 - cosR); + const a12 = w * (1.0 - cosR) - sqrW * sinR; - let a20 = w * (1.0 - cosR) - sqrW * sinR; - let a21 = w * (1.0 - cosR) + sqrW * sinR; - let a22 = cosR + w * (1.0 - cosR); + const a20 = w * (1.0 - cosR) - sqrW * sinR; + const a21 = w * (1.0 - cosR) + sqrW * sinR; + const a22 = cosR + w * (1.0 - cosR); - let matrix = [ + const matrix = [ a00, a01, a02, 0, 0, a10, a11, a12, 0, 0, a20, a21, a22, 0, 0, @@ -233,10 +233,10 @@ */ contrast(amount, multiply) { - let v = (amount || 0) + 1; - let o = -128 * (v - 1); + const v = (amount || 0) + 1; + const o = -128 * (v - 1); - let matrix = [ + const matrix = [ v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, @@ -255,10 +255,10 @@ */ saturate(amount, multiply) { - let x = (amount || 0) * 2 / 3 + 1; - let y = ((x - 1) * -0.5); + const x = (amount || 0) * 2 / 3 + 1; + const y = ((x - 1) * -0.5); - let matrix = [ + const matrix = [ x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, @@ -286,7 +286,7 @@ */ negative(multiply) { - let matrix = [ + const matrix = [ 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, @@ -303,7 +303,7 @@ */ sepia(multiply) { - let matrix = [ + const matrix = [ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, @@ -320,7 +320,7 @@ */ technicolor(multiply) { - let matrix = [ + const matrix = [ 1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138, @@ -337,7 +337,7 @@ */ polaroid(multiply) { - let matrix = [ + const matrix = [ 1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, @@ -354,7 +354,7 @@ */ toBGR(multiply) { - let matrix = [ + const matrix = [ 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, @@ -371,7 +371,7 @@ */ kodachrome(multiply) { - let matrix = [ + const matrix = [ 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, @@ -388,7 +388,7 @@ */ browni(multiply) { - let matrix = [ + const matrix = [ 0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283, @@ -405,7 +405,7 @@ */ vintage(multiply) { - let matrix = [ + const matrix = [ 0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123, 0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591, 0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296, @@ -432,15 +432,15 @@ lightColor = lightColor || 0xFFE580; darkColor = darkColor || 0x338000; - let lR = ((lightColor >> 16) & 0xFF) / 255; - let lG = ((lightColor >> 8) & 0xFF) / 255; - let lB = (lightColor & 0xFF) / 255; + const lR = ((lightColor >> 16) & 0xFF) / 255; + const lG = ((lightColor >> 8) & 0xFF) / 255; + const lB = (lightColor & 0xFF) / 255; - let dR = ((darkColor >> 16) & 0xFF) / 255; - let dG = ((darkColor >> 8) & 0xFF) / 255; - let dB = (darkColor & 0xFF) / 255; + const dR = ((darkColor >> 16) & 0xFF) / 255; + const dG = ((darkColor >> 8) & 0xFF) / 255; + const dB = (darkColor & 0xFF) / 255; - let matrix = [ + const matrix = [ 0.3, 0.59, 0.11, 0, 0, lR, lG, lB, desaturation, 0, dR, dG, dB, toned, 0, @@ -459,7 +459,7 @@ night(intensity, multiply) { intensity = intensity || 0.1; - let matrix = [ + const matrix = [ intensity * ( -2.0), -intensity, 0, 0, 0, -intensity, 0, intensity, 0, 0, 0, intensity, intensity * 2.0, 0, 0, @@ -480,7 +480,7 @@ */ predator(amount, multiply) { - let matrix = [ + const matrix = [ 11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount, -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount, -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount, @@ -500,7 +500,7 @@ */ lsd(multiply) { - let matrix = [ + const matrix = [ 2, -0.4, 0.5, 0, 0, -0.5, 2, -0.4, 0, 0, -0.4, -0.5, 3, 0, 0, @@ -516,7 +516,7 @@ */ reset() { - let matrix = [ + const matrix = [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, @@ -546,4 +546,4 @@ //Americanized alias ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale; -export default ColorMatrixFilter; \ No newline at end of file +export default ColorMatrixFilter; diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index d222540..862acc9 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -16,7 +16,7 @@ { constructor(sprite, scale) { - let maskMatrix = new core.Matrix(); + const maskMatrix = new core.Matrix(); sprite.renderable = false; super( @@ -45,7 +45,7 @@ apply(filterManager, input, output) { - let ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); + const ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; @@ -71,4 +71,4 @@ } } -export default DisplacementFilter; \ No newline at end of file +export default DisplacementFilter; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index eb6623e..d5c1467 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,7 @@ target: null, type: null, data: this.mouse, - stopPropagation:function(){ + stopPropagation(){ this.stopped = true; } }; @@ -324,13 +324,13 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution) + setTargetElement(element, resolution=1) { this.removeEvents(); this.interactionDOMElement = element; - this.resolution = resolution || 1; + this.resolution = resolution; this.addEvents(); } @@ -557,7 +557,7 @@ // This will allow pixi to completly ignore and bypass checking the displayObjects children. if(displayObject.interactiveChildren) { - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length-1; i >= 0; i--) { @@ -700,10 +700,10 @@ */ processMouseUp( displayObject, hit ) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; - let isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isRightButton = e.button === 2 || e.which === 3; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; if(hit) { @@ -862,14 +862,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; //TODO POOL - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -914,14 +914,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -980,14 +980,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -1026,12 +1026,7 @@ */ getTouchData(touchEvent) { - let touchData = this.interactiveDataPool.pop(); - - if(!touchData) - { - touchData = new InteractionData(); - } + const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index a83aa79..da79b08 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -107,7 +107,7 @@ _colorMatrix(matrix) { // Create a Float32 Array and normalize the offset component to 0-1 - let m = new Float32Array(matrix); + const m = new Float32Array(matrix); m[4] /= 255; m[9] /= 255; m[14] /= 255; @@ -124,7 +124,7 @@ */ brightness(b, multiply) { - let matrix = [ + const matrix = [ b, 0, 0, 0, 0, 0, b, 0, 0, 0, 0, 0, b, 0, 0, @@ -142,7 +142,7 @@ */ greyscale(scale, multiply) { - let matrix = [ + const matrix = [ scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, @@ -160,7 +160,7 @@ */ blackAndWhite(multiply) { - let matrix = [ + const matrix = [ 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, @@ -180,7 +180,7 @@ { rotation = (rotation || 0) / 180 * Math.PI; - let cosR = Math.cos(rotation), + const cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; @@ -197,22 +197,22 @@ see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - let w = 1/3, sqrW = sqrt(w);//weight is + const w = 1/3, sqrW = sqrt(w);//weight is - let a00 = cosR + (1.0 - cosR) * w; - let a01 = w * (1.0 - cosR) - sqrW * sinR; - let a02 = w * (1.0 - cosR) + sqrW * sinR; + const a00 = cosR + (1.0 - cosR) * w; + const a01 = w * (1.0 - cosR) - sqrW * sinR; + const a02 = w * (1.0 - cosR) + sqrW * sinR; - let a10 = w * (1.0 - cosR) + sqrW * sinR; - let a11 = cosR + w*(1.0 - cosR); - let a12 = w * (1.0 - cosR) - sqrW * sinR; + const a10 = w * (1.0 - cosR) + sqrW * sinR; + const a11 = cosR + w*(1.0 - cosR); + const a12 = w * (1.0 - cosR) - sqrW * sinR; - let a20 = w * (1.0 - cosR) - sqrW * sinR; - let a21 = w * (1.0 - cosR) + sqrW * sinR; - let a22 = cosR + w * (1.0 - cosR); + const a20 = w * (1.0 - cosR) - sqrW * sinR; + const a21 = w * (1.0 - cosR) + sqrW * sinR; + const a22 = cosR + w * (1.0 - cosR); - let matrix = [ + const matrix = [ a00, a01, a02, 0, 0, a10, a11, a12, 0, 0, a20, a21, a22, 0, 0, @@ -233,10 +233,10 @@ */ contrast(amount, multiply) { - let v = (amount || 0) + 1; - let o = -128 * (v - 1); + const v = (amount || 0) + 1; + const o = -128 * (v - 1); - let matrix = [ + const matrix = [ v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, @@ -255,10 +255,10 @@ */ saturate(amount, multiply) { - let x = (amount || 0) * 2 / 3 + 1; - let y = ((x - 1) * -0.5); + const x = (amount || 0) * 2 / 3 + 1; + const y = ((x - 1) * -0.5); - let matrix = [ + const matrix = [ x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, @@ -286,7 +286,7 @@ */ negative(multiply) { - let matrix = [ + const matrix = [ 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, @@ -303,7 +303,7 @@ */ sepia(multiply) { - let matrix = [ + const matrix = [ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, @@ -320,7 +320,7 @@ */ technicolor(multiply) { - let matrix = [ + const matrix = [ 1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138, @@ -337,7 +337,7 @@ */ polaroid(multiply) { - let matrix = [ + const matrix = [ 1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, @@ -354,7 +354,7 @@ */ toBGR(multiply) { - let matrix = [ + const matrix = [ 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, @@ -371,7 +371,7 @@ */ kodachrome(multiply) { - let matrix = [ + const matrix = [ 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, @@ -388,7 +388,7 @@ */ browni(multiply) { - let matrix = [ + const matrix = [ 0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283, @@ -405,7 +405,7 @@ */ vintage(multiply) { - let matrix = [ + const matrix = [ 0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123, 0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591, 0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296, @@ -432,15 +432,15 @@ lightColor = lightColor || 0xFFE580; darkColor = darkColor || 0x338000; - let lR = ((lightColor >> 16) & 0xFF) / 255; - let lG = ((lightColor >> 8) & 0xFF) / 255; - let lB = (lightColor & 0xFF) / 255; + const lR = ((lightColor >> 16) & 0xFF) / 255; + const lG = ((lightColor >> 8) & 0xFF) / 255; + const lB = (lightColor & 0xFF) / 255; - let dR = ((darkColor >> 16) & 0xFF) / 255; - let dG = ((darkColor >> 8) & 0xFF) / 255; - let dB = (darkColor & 0xFF) / 255; + const dR = ((darkColor >> 16) & 0xFF) / 255; + const dG = ((darkColor >> 8) & 0xFF) / 255; + const dB = (darkColor & 0xFF) / 255; - let matrix = [ + const matrix = [ 0.3, 0.59, 0.11, 0, 0, lR, lG, lB, desaturation, 0, dR, dG, dB, toned, 0, @@ -459,7 +459,7 @@ night(intensity, multiply) { intensity = intensity || 0.1; - let matrix = [ + const matrix = [ intensity * ( -2.0), -intensity, 0, 0, 0, -intensity, 0, intensity, 0, 0, 0, intensity, intensity * 2.0, 0, 0, @@ -480,7 +480,7 @@ */ predator(amount, multiply) { - let matrix = [ + const matrix = [ 11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount, -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount, -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount, @@ -500,7 +500,7 @@ */ lsd(multiply) { - let matrix = [ + const matrix = [ 2, -0.4, 0.5, 0, 0, -0.5, 2, -0.4, 0, 0, -0.4, -0.5, 3, 0, 0, @@ -516,7 +516,7 @@ */ reset() { - let matrix = [ + const matrix = [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, @@ -546,4 +546,4 @@ //Americanized alias ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale; -export default ColorMatrixFilter; \ No newline at end of file +export default ColorMatrixFilter; diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index d222540..862acc9 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -16,7 +16,7 @@ { constructor(sprite, scale) { - let maskMatrix = new core.Matrix(); + const maskMatrix = new core.Matrix(); sprite.renderable = false; super( @@ -45,7 +45,7 @@ apply(filterManager, input, output) { - let ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); + const ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; @@ -71,4 +71,4 @@ } } -export default DisplacementFilter; \ No newline at end of file +export default DisplacementFilter; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index eb6623e..d5c1467 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,7 @@ target: null, type: null, data: this.mouse, - stopPropagation:function(){ + stopPropagation(){ this.stopped = true; } }; @@ -324,13 +324,13 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution) + setTargetElement(element, resolution=1) { this.removeEvents(); this.interactionDOMElement = element; - this.resolution = resolution || 1; + this.resolution = resolution; this.addEvents(); } @@ -557,7 +557,7 @@ // This will allow pixi to completly ignore and bypass checking the displayObjects children. if(displayObject.interactiveChildren) { - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length-1; i >= 0; i--) { @@ -700,10 +700,10 @@ */ processMouseUp( displayObject, hit ) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; - let isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isRightButton = e.button === 2 || e.which === 3; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; if(hit) { @@ -862,14 +862,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; //TODO POOL - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -914,14 +914,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -980,14 +980,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -1026,12 +1026,7 @@ */ getTouchData(touchEvent) { - let touchData = this.interactiveDataPool.pop(); - - if(!touchData) - { - touchData = new InteractionData(); - } + const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index e32ee4c..4b034b1 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -4,9 +4,9 @@ import path from 'path'; function parse(resource, texture) { - let data = {}; - let info = resource.data.getElementsByTagName('info')[0]; - let common = resource.data.getElementsByTagName('common')[0]; + const data = {}; + const info = resource.data.getElementsByTagName('info')[0]; + const common = resource.data.getElementsByTagName('common')[0]; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); @@ -18,9 +18,9 @@ for (let i = 0; i < letters.length; i++) { - let charCode = parseInt(letters[i].getAttribute('id'), 10); + const charCode = parseInt(letters[i].getAttribute('id'), 10); - let textureRect = new core.Rectangle( + const textureRect = new core.Rectangle( parseInt(letters[i].getAttribute('x'), 10) + texture.frame.x, parseInt(letters[i].getAttribute('y'), 10) + texture.frame.y, parseInt(letters[i].getAttribute('width'), 10), @@ -38,12 +38,12 @@ } //parse kernings - let kernings = resource.data.getElementsByTagName('kerning'); + const kernings = resource.data.getElementsByTagName('kerning'); for (let i = 0; i < kernings.length; i++) { - let first = parseInt(kernings[i].getAttribute('first'), 10); - let second = parseInt(kernings[i].getAttribute('second'), 10); - let amount = parseInt(kernings[i].getAttribute('amount'), 10); + const first = parseInt(kernings[i].getAttribute('first'), 10); + const second = parseInt(kernings[i].getAttribute('second'), 10); + const amount = parseInt(kernings[i].getAttribute('amount'), 10); if(data.chars[second]) { @@ -96,12 +96,12 @@ xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } - + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { xmlUrl += '/'; } - + let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); if (core.utils.TextureCache[textureUrl]) { //reuse existing texture @@ -115,7 +115,7 @@ metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, function (res) { + this.add(resource.name + '_image', textureUrl, loadOptions, res => { parse(resource, res.texture); next(); }); diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index a83aa79..da79b08 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -107,7 +107,7 @@ _colorMatrix(matrix) { // Create a Float32 Array and normalize the offset component to 0-1 - let m = new Float32Array(matrix); + const m = new Float32Array(matrix); m[4] /= 255; m[9] /= 255; m[14] /= 255; @@ -124,7 +124,7 @@ */ brightness(b, multiply) { - let matrix = [ + const matrix = [ b, 0, 0, 0, 0, 0, b, 0, 0, 0, 0, 0, b, 0, 0, @@ -142,7 +142,7 @@ */ greyscale(scale, multiply) { - let matrix = [ + const matrix = [ scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, @@ -160,7 +160,7 @@ */ blackAndWhite(multiply) { - let matrix = [ + const matrix = [ 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, @@ -180,7 +180,7 @@ { rotation = (rotation || 0) / 180 * Math.PI; - let cosR = Math.cos(rotation), + const cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; @@ -197,22 +197,22 @@ see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - let w = 1/3, sqrW = sqrt(w);//weight is + const w = 1/3, sqrW = sqrt(w);//weight is - let a00 = cosR + (1.0 - cosR) * w; - let a01 = w * (1.0 - cosR) - sqrW * sinR; - let a02 = w * (1.0 - cosR) + sqrW * sinR; + const a00 = cosR + (1.0 - cosR) * w; + const a01 = w * (1.0 - cosR) - sqrW * sinR; + const a02 = w * (1.0 - cosR) + sqrW * sinR; - let a10 = w * (1.0 - cosR) + sqrW * sinR; - let a11 = cosR + w*(1.0 - cosR); - let a12 = w * (1.0 - cosR) - sqrW * sinR; + const a10 = w * (1.0 - cosR) + sqrW * sinR; + const a11 = cosR + w*(1.0 - cosR); + const a12 = w * (1.0 - cosR) - sqrW * sinR; - let a20 = w * (1.0 - cosR) - sqrW * sinR; - let a21 = w * (1.0 - cosR) + sqrW * sinR; - let a22 = cosR + w * (1.0 - cosR); + const a20 = w * (1.0 - cosR) - sqrW * sinR; + const a21 = w * (1.0 - cosR) + sqrW * sinR; + const a22 = cosR + w * (1.0 - cosR); - let matrix = [ + const matrix = [ a00, a01, a02, 0, 0, a10, a11, a12, 0, 0, a20, a21, a22, 0, 0, @@ -233,10 +233,10 @@ */ contrast(amount, multiply) { - let v = (amount || 0) + 1; - let o = -128 * (v - 1); + const v = (amount || 0) + 1; + const o = -128 * (v - 1); - let matrix = [ + const matrix = [ v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, @@ -255,10 +255,10 @@ */ saturate(amount, multiply) { - let x = (amount || 0) * 2 / 3 + 1; - let y = ((x - 1) * -0.5); + const x = (amount || 0) * 2 / 3 + 1; + const y = ((x - 1) * -0.5); - let matrix = [ + const matrix = [ x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, @@ -286,7 +286,7 @@ */ negative(multiply) { - let matrix = [ + const matrix = [ 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, @@ -303,7 +303,7 @@ */ sepia(multiply) { - let matrix = [ + const matrix = [ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, @@ -320,7 +320,7 @@ */ technicolor(multiply) { - let matrix = [ + const matrix = [ 1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138, @@ -337,7 +337,7 @@ */ polaroid(multiply) { - let matrix = [ + const matrix = [ 1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, @@ -354,7 +354,7 @@ */ toBGR(multiply) { - let matrix = [ + const matrix = [ 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, @@ -371,7 +371,7 @@ */ kodachrome(multiply) { - let matrix = [ + const matrix = [ 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, @@ -388,7 +388,7 @@ */ browni(multiply) { - let matrix = [ + const matrix = [ 0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283, @@ -405,7 +405,7 @@ */ vintage(multiply) { - let matrix = [ + const matrix = [ 0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123, 0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591, 0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296, @@ -432,15 +432,15 @@ lightColor = lightColor || 0xFFE580; darkColor = darkColor || 0x338000; - let lR = ((lightColor >> 16) & 0xFF) / 255; - let lG = ((lightColor >> 8) & 0xFF) / 255; - let lB = (lightColor & 0xFF) / 255; + const lR = ((lightColor >> 16) & 0xFF) / 255; + const lG = ((lightColor >> 8) & 0xFF) / 255; + const lB = (lightColor & 0xFF) / 255; - let dR = ((darkColor >> 16) & 0xFF) / 255; - let dG = ((darkColor >> 8) & 0xFF) / 255; - let dB = (darkColor & 0xFF) / 255; + const dR = ((darkColor >> 16) & 0xFF) / 255; + const dG = ((darkColor >> 8) & 0xFF) / 255; + const dB = (darkColor & 0xFF) / 255; - let matrix = [ + const matrix = [ 0.3, 0.59, 0.11, 0, 0, lR, lG, lB, desaturation, 0, dR, dG, dB, toned, 0, @@ -459,7 +459,7 @@ night(intensity, multiply) { intensity = intensity || 0.1; - let matrix = [ + const matrix = [ intensity * ( -2.0), -intensity, 0, 0, 0, -intensity, 0, intensity, 0, 0, 0, intensity, intensity * 2.0, 0, 0, @@ -480,7 +480,7 @@ */ predator(amount, multiply) { - let matrix = [ + const matrix = [ 11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount, -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount, -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount, @@ -500,7 +500,7 @@ */ lsd(multiply) { - let matrix = [ + const matrix = [ 2, -0.4, 0.5, 0, 0, -0.5, 2, -0.4, 0, 0, -0.4, -0.5, 3, 0, 0, @@ -516,7 +516,7 @@ */ reset() { - let matrix = [ + const matrix = [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, @@ -546,4 +546,4 @@ //Americanized alias ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale; -export default ColorMatrixFilter; \ No newline at end of file +export default ColorMatrixFilter; diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index d222540..862acc9 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -16,7 +16,7 @@ { constructor(sprite, scale) { - let maskMatrix = new core.Matrix(); + const maskMatrix = new core.Matrix(); sprite.renderable = false; super( @@ -45,7 +45,7 @@ apply(filterManager, input, output) { - let ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); + const ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; @@ -71,4 +71,4 @@ } } -export default DisplacementFilter; \ No newline at end of file +export default DisplacementFilter; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index eb6623e..d5c1467 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,7 @@ target: null, type: null, data: this.mouse, - stopPropagation:function(){ + stopPropagation(){ this.stopped = true; } }; @@ -324,13 +324,13 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution) + setTargetElement(element, resolution=1) { this.removeEvents(); this.interactionDOMElement = element; - this.resolution = resolution || 1; + this.resolution = resolution; this.addEvents(); } @@ -557,7 +557,7 @@ // This will allow pixi to completly ignore and bypass checking the displayObjects children. if(displayObject.interactiveChildren) { - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length-1; i >= 0; i--) { @@ -700,10 +700,10 @@ */ processMouseUp( displayObject, hit ) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; - let isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isRightButton = e.button === 2 || e.which === 3; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; if(hit) { @@ -862,14 +862,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; //TODO POOL - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -914,14 +914,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -980,14 +980,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -1026,12 +1026,7 @@ */ getTouchData(touchEvent) { - let touchData = this.interactiveDataPool.pop(); - - if(!touchData) - { - touchData = new InteractionData(); - } + const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index e32ee4c..4b034b1 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -4,9 +4,9 @@ import path from 'path'; function parse(resource, texture) { - let data = {}; - let info = resource.data.getElementsByTagName('info')[0]; - let common = resource.data.getElementsByTagName('common')[0]; + const data = {}; + const info = resource.data.getElementsByTagName('info')[0]; + const common = resource.data.getElementsByTagName('common')[0]; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); @@ -18,9 +18,9 @@ for (let i = 0; i < letters.length; i++) { - let charCode = parseInt(letters[i].getAttribute('id'), 10); + const charCode = parseInt(letters[i].getAttribute('id'), 10); - let textureRect = new core.Rectangle( + const textureRect = new core.Rectangle( parseInt(letters[i].getAttribute('x'), 10) + texture.frame.x, parseInt(letters[i].getAttribute('y'), 10) + texture.frame.y, parseInt(letters[i].getAttribute('width'), 10), @@ -38,12 +38,12 @@ } //parse kernings - let kernings = resource.data.getElementsByTagName('kerning'); + const kernings = resource.data.getElementsByTagName('kerning'); for (let i = 0; i < kernings.length; i++) { - let first = parseInt(kernings[i].getAttribute('first'), 10); - let second = parseInt(kernings[i].getAttribute('second'), 10); - let amount = parseInt(kernings[i].getAttribute('amount'), 10); + const first = parseInt(kernings[i].getAttribute('first'), 10); + const second = parseInt(kernings[i].getAttribute('second'), 10); + const amount = parseInt(kernings[i].getAttribute('amount'), 10); if(data.chars[second]) { @@ -96,12 +96,12 @@ xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } - + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { xmlUrl += '/'; } - + let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); if (core.utils.TextureCache[textureUrl]) { //reuse existing texture @@ -115,7 +115,7 @@ metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, function (res) { + this.add(resource.name + '_image', textureUrl, loadOptions, res => { parse(resource, res.texture); next(); }); diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 3fa8b7f..34a60b4 100644 --- a/src/loaders/spritesheetParser.js +++ b/src/loaders/spritesheetParser.js @@ -9,7 +9,7 @@ return function (resource, next) { let resourcePath; - let imageResourceName = resource.name + '_image'; + let imageResourceName = `${resource.name}_image`; // skip if no data, its not json, it isn't spritesheet data, or the image resource already exists if (!resource.data || !resource.isJson || !resource.data.frames || this.resources[imageResourceName]) @@ -17,7 +17,7 @@ return next(); } - let loadOptions = { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata @@ -30,7 +30,7 @@ } else { - resourcePath = path.dirname(resource.url.replace(this.baseUrl, '')) + '/' + resource.data.meta.image; + resourcePath = `${path.dirname(resource.url.replace(this.baseUrl, ''))}/${resource.data.meta.image}`; } // load the image for this sheet @@ -38,9 +38,9 @@ { resource.textures = {}; - let frames = resource.data.frames; - let frameKeys = Object.keys(frames); - let resolution = core.utils.getResolutionOfUrl(resource.url); + const frames = resource.data.frames; + const frameKeys = Object.keys(frames); + const resolution = core.utils.getResolutionOfUrl(resource.url); let batchIndex = 0; function processFrames(initialFrameIndex, maxFrames) @@ -50,14 +50,14 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { let i = frameKeys[frameIndex]; - let rect = frames[i].frame; + const rect = frames[i].frame; if (rect) { let frame = null; let trim = null; - let orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); + const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); if (frames[i].rotated) { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); @@ -101,7 +101,7 @@ } function iteration() { - processNextBatch(function() { + processNextBatch(() => { if (shouldProcessNextBatch()) { iteration(); } else { diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index a83aa79..da79b08 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -107,7 +107,7 @@ _colorMatrix(matrix) { // Create a Float32 Array and normalize the offset component to 0-1 - let m = new Float32Array(matrix); + const m = new Float32Array(matrix); m[4] /= 255; m[9] /= 255; m[14] /= 255; @@ -124,7 +124,7 @@ */ brightness(b, multiply) { - let matrix = [ + const matrix = [ b, 0, 0, 0, 0, 0, b, 0, 0, 0, 0, 0, b, 0, 0, @@ -142,7 +142,7 @@ */ greyscale(scale, multiply) { - let matrix = [ + const matrix = [ scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, @@ -160,7 +160,7 @@ */ blackAndWhite(multiply) { - let matrix = [ + const matrix = [ 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, @@ -180,7 +180,7 @@ { rotation = (rotation || 0) / 180 * Math.PI; - let cosR = Math.cos(rotation), + const cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; @@ -197,22 +197,22 @@ see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - let w = 1/3, sqrW = sqrt(w);//weight is + const w = 1/3, sqrW = sqrt(w);//weight is - let a00 = cosR + (1.0 - cosR) * w; - let a01 = w * (1.0 - cosR) - sqrW * sinR; - let a02 = w * (1.0 - cosR) + sqrW * sinR; + const a00 = cosR + (1.0 - cosR) * w; + const a01 = w * (1.0 - cosR) - sqrW * sinR; + const a02 = w * (1.0 - cosR) + sqrW * sinR; - let a10 = w * (1.0 - cosR) + sqrW * sinR; - let a11 = cosR + w*(1.0 - cosR); - let a12 = w * (1.0 - cosR) - sqrW * sinR; + const a10 = w * (1.0 - cosR) + sqrW * sinR; + const a11 = cosR + w*(1.0 - cosR); + const a12 = w * (1.0 - cosR) - sqrW * sinR; - let a20 = w * (1.0 - cosR) - sqrW * sinR; - let a21 = w * (1.0 - cosR) + sqrW * sinR; - let a22 = cosR + w * (1.0 - cosR); + const a20 = w * (1.0 - cosR) - sqrW * sinR; + const a21 = w * (1.0 - cosR) + sqrW * sinR; + const a22 = cosR + w * (1.0 - cosR); - let matrix = [ + const matrix = [ a00, a01, a02, 0, 0, a10, a11, a12, 0, 0, a20, a21, a22, 0, 0, @@ -233,10 +233,10 @@ */ contrast(amount, multiply) { - let v = (amount || 0) + 1; - let o = -128 * (v - 1); + const v = (amount || 0) + 1; + const o = -128 * (v - 1); - let matrix = [ + const matrix = [ v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, @@ -255,10 +255,10 @@ */ saturate(amount, multiply) { - let x = (amount || 0) * 2 / 3 + 1; - let y = ((x - 1) * -0.5); + const x = (amount || 0) * 2 / 3 + 1; + const y = ((x - 1) * -0.5); - let matrix = [ + const matrix = [ x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, @@ -286,7 +286,7 @@ */ negative(multiply) { - let matrix = [ + const matrix = [ 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, @@ -303,7 +303,7 @@ */ sepia(multiply) { - let matrix = [ + const matrix = [ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, @@ -320,7 +320,7 @@ */ technicolor(multiply) { - let matrix = [ + const matrix = [ 1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138, @@ -337,7 +337,7 @@ */ polaroid(multiply) { - let matrix = [ + const matrix = [ 1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, @@ -354,7 +354,7 @@ */ toBGR(multiply) { - let matrix = [ + const matrix = [ 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, @@ -371,7 +371,7 @@ */ kodachrome(multiply) { - let matrix = [ + const matrix = [ 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, @@ -388,7 +388,7 @@ */ browni(multiply) { - let matrix = [ + const matrix = [ 0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283, @@ -405,7 +405,7 @@ */ vintage(multiply) { - let matrix = [ + const matrix = [ 0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123, 0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591, 0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296, @@ -432,15 +432,15 @@ lightColor = lightColor || 0xFFE580; darkColor = darkColor || 0x338000; - let lR = ((lightColor >> 16) & 0xFF) / 255; - let lG = ((lightColor >> 8) & 0xFF) / 255; - let lB = (lightColor & 0xFF) / 255; + const lR = ((lightColor >> 16) & 0xFF) / 255; + const lG = ((lightColor >> 8) & 0xFF) / 255; + const lB = (lightColor & 0xFF) / 255; - let dR = ((darkColor >> 16) & 0xFF) / 255; - let dG = ((darkColor >> 8) & 0xFF) / 255; - let dB = (darkColor & 0xFF) / 255; + const dR = ((darkColor >> 16) & 0xFF) / 255; + const dG = ((darkColor >> 8) & 0xFF) / 255; + const dB = (darkColor & 0xFF) / 255; - let matrix = [ + const matrix = [ 0.3, 0.59, 0.11, 0, 0, lR, lG, lB, desaturation, 0, dR, dG, dB, toned, 0, @@ -459,7 +459,7 @@ night(intensity, multiply) { intensity = intensity || 0.1; - let matrix = [ + const matrix = [ intensity * ( -2.0), -intensity, 0, 0, 0, -intensity, 0, intensity, 0, 0, 0, intensity, intensity * 2.0, 0, 0, @@ -480,7 +480,7 @@ */ predator(amount, multiply) { - let matrix = [ + const matrix = [ 11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount, -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount, -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount, @@ -500,7 +500,7 @@ */ lsd(multiply) { - let matrix = [ + const matrix = [ 2, -0.4, 0.5, 0, 0, -0.5, 2, -0.4, 0, 0, -0.4, -0.5, 3, 0, 0, @@ -516,7 +516,7 @@ */ reset() { - let matrix = [ + const matrix = [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, @@ -546,4 +546,4 @@ //Americanized alias ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale; -export default ColorMatrixFilter; \ No newline at end of file +export default ColorMatrixFilter; diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index d222540..862acc9 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -16,7 +16,7 @@ { constructor(sprite, scale) { - let maskMatrix = new core.Matrix(); + const maskMatrix = new core.Matrix(); sprite.renderable = false; super( @@ -45,7 +45,7 @@ apply(filterManager, input, output) { - let ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); + const ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; @@ -71,4 +71,4 @@ } } -export default DisplacementFilter; \ No newline at end of file +export default DisplacementFilter; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index eb6623e..d5c1467 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,7 @@ target: null, type: null, data: this.mouse, - stopPropagation:function(){ + stopPropagation(){ this.stopped = true; } }; @@ -324,13 +324,13 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution) + setTargetElement(element, resolution=1) { this.removeEvents(); this.interactionDOMElement = element; - this.resolution = resolution || 1; + this.resolution = resolution; this.addEvents(); } @@ -557,7 +557,7 @@ // This will allow pixi to completly ignore and bypass checking the displayObjects children. if(displayObject.interactiveChildren) { - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length-1; i >= 0; i--) { @@ -700,10 +700,10 @@ */ processMouseUp( displayObject, hit ) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; - let isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isRightButton = e.button === 2 || e.which === 3; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; if(hit) { @@ -862,14 +862,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; //TODO POOL - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -914,14 +914,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -980,14 +980,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -1026,12 +1026,7 @@ */ getTouchData(touchEvent) { - let touchData = this.interactiveDataPool.pop(); - - if(!touchData) - { - touchData = new InteractionData(); - } + const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index e32ee4c..4b034b1 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -4,9 +4,9 @@ import path from 'path'; function parse(resource, texture) { - let data = {}; - let info = resource.data.getElementsByTagName('info')[0]; - let common = resource.data.getElementsByTagName('common')[0]; + const data = {}; + const info = resource.data.getElementsByTagName('info')[0]; + const common = resource.data.getElementsByTagName('common')[0]; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); @@ -18,9 +18,9 @@ for (let i = 0; i < letters.length; i++) { - let charCode = parseInt(letters[i].getAttribute('id'), 10); + const charCode = parseInt(letters[i].getAttribute('id'), 10); - let textureRect = new core.Rectangle( + const textureRect = new core.Rectangle( parseInt(letters[i].getAttribute('x'), 10) + texture.frame.x, parseInt(letters[i].getAttribute('y'), 10) + texture.frame.y, parseInt(letters[i].getAttribute('width'), 10), @@ -38,12 +38,12 @@ } //parse kernings - let kernings = resource.data.getElementsByTagName('kerning'); + const kernings = resource.data.getElementsByTagName('kerning'); for (let i = 0; i < kernings.length; i++) { - let first = parseInt(kernings[i].getAttribute('first'), 10); - let second = parseInt(kernings[i].getAttribute('second'), 10); - let amount = parseInt(kernings[i].getAttribute('amount'), 10); + const first = parseInt(kernings[i].getAttribute('first'), 10); + const second = parseInt(kernings[i].getAttribute('second'), 10); + const amount = parseInt(kernings[i].getAttribute('amount'), 10); if(data.chars[second]) { @@ -96,12 +96,12 @@ xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } - + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { xmlUrl += '/'; } - + let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); if (core.utils.TextureCache[textureUrl]) { //reuse existing texture @@ -115,7 +115,7 @@ metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, function (res) { + this.add(resource.name + '_image', textureUrl, loadOptions, res => { parse(resource, res.texture); next(); }); diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 3fa8b7f..34a60b4 100644 --- a/src/loaders/spritesheetParser.js +++ b/src/loaders/spritesheetParser.js @@ -9,7 +9,7 @@ return function (resource, next) { let resourcePath; - let imageResourceName = resource.name + '_image'; + let imageResourceName = `${resource.name}_image`; // skip if no data, its not json, it isn't spritesheet data, or the image resource already exists if (!resource.data || !resource.isJson || !resource.data.frames || this.resources[imageResourceName]) @@ -17,7 +17,7 @@ return next(); } - let loadOptions = { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata @@ -30,7 +30,7 @@ } else { - resourcePath = path.dirname(resource.url.replace(this.baseUrl, '')) + '/' + resource.data.meta.image; + resourcePath = `${path.dirname(resource.url.replace(this.baseUrl, ''))}/${resource.data.meta.image}`; } // load the image for this sheet @@ -38,9 +38,9 @@ { resource.textures = {}; - let frames = resource.data.frames; - let frameKeys = Object.keys(frames); - let resolution = core.utils.getResolutionOfUrl(resource.url); + const frames = resource.data.frames; + const frameKeys = Object.keys(frames); + const resolution = core.utils.getResolutionOfUrl(resource.url); let batchIndex = 0; function processFrames(initialFrameIndex, maxFrames) @@ -50,14 +50,14 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { let i = frameKeys[frameIndex]; - let rect = frames[i].frame; + const rect = frames[i].frame; if (rect) { let frame = null; let trim = null; - let orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); + const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); if (frames[i].rotated) { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); @@ -101,7 +101,7 @@ } function iteration() { - processNextBatch(function() { + processNextBatch(() => { if (shouldProcessNextBatch()) { iteration(); } else { diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index f269992..0c2eff2 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -122,7 +122,7 @@ renderer.flush(); // renderer.plugins.mesh.render(this); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -172,7 +172,7 @@ glData.shader.uniforms.alpha = this.worldAlpha; glData.shader.uniforms.tint = this.tintRgb; - let drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; + const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() .draw(drawMode, this.indices.length) @@ -187,10 +187,10 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -220,16 +220,16 @@ _renderCanvasTriangleMesh(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; + const vertices = this.vertices; + const uvs = this.uvs; - let length = vertices.length / 2; + const length = vertices.length / 2; // this.count++; for (let i = 0; i < length - 2; i++) { // draw some triangles! - let index = i * 2; + const index = i * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index, (index + 2), (index + 4)); } } @@ -243,17 +243,17 @@ _renderCanvasTriangles(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; - let indices = this.indices; + const vertices = this.vertices; + const uvs = this.uvs; + const indices = this.indices; - let length = indices.length; + const length = indices.length; // this.count++; for (let i = 0; i < length; i += 3) { // draw some triangles! - let index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; + const index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2); } } @@ -271,23 +271,23 @@ */ _renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2) { - let base = this._texture.baseTexture; - let textureSource = base.source; - let textureWidth = base.width; - let textureHeight = base.height; + const base = this._texture.baseTexture; + const textureSource = base.source; + const textureWidth = base.width; + const textureHeight = base.height; let x0 = vertices[index0], x1 = vertices[index1], x2 = vertices[index2]; let y0 = vertices[index0 + 1], y1 = vertices[index1 + 1], y2 = vertices[index2 + 1]; - let u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; - let v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; + const u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; + const v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; if (this.canvasPadding > 0) { - let paddingX = this.canvasPadding / this.worldTransform.a; - let paddingY = this.canvasPadding / this.worldTransform.d; - let centerX = (x0 + x1 + x2) / 3; - let centerY = (y0 + y1 + y2) / 3; + const paddingX = this.canvasPadding / this.worldTransform.a; + const paddingY = this.canvasPadding / this.worldTransform.d; + const centerX = (x0 + x1 + x2) / 3; + const centerY = (y0 + y1 + y2) / 3; let normX = x0 - centerX; let normY = y0 - centerY; @@ -326,13 +326,13 @@ context.clip(); // Compute matrix transform - let delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); - let deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); - let deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); - let deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); - let deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); - let deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); - let deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); + const delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); + const deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); + const deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); + const deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); + const deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); + const deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); + const deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); context.transform(deltaA / delta, deltaD / delta, deltaB / delta, deltaE / delta, @@ -352,20 +352,20 @@ */ renderMeshFlat(Mesh) { - let context = this.context; - let vertices = Mesh.vertices; + const context = this.context; + const vertices = Mesh.vertices; - let length = vertices.length/2; + const length = vertices.length/2; // this.count++; context.beginPath(); for (let i=1; i < length-2; i++) { // draw some triangles! - let index = i*2; + const index = i*2; - let x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; - let y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; + const x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; + const y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; context.moveTo(x0, y0); context.lineTo(x1, y1); diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index a83aa79..da79b08 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -107,7 +107,7 @@ _colorMatrix(matrix) { // Create a Float32 Array and normalize the offset component to 0-1 - let m = new Float32Array(matrix); + const m = new Float32Array(matrix); m[4] /= 255; m[9] /= 255; m[14] /= 255; @@ -124,7 +124,7 @@ */ brightness(b, multiply) { - let matrix = [ + const matrix = [ b, 0, 0, 0, 0, 0, b, 0, 0, 0, 0, 0, b, 0, 0, @@ -142,7 +142,7 @@ */ greyscale(scale, multiply) { - let matrix = [ + const matrix = [ scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, @@ -160,7 +160,7 @@ */ blackAndWhite(multiply) { - let matrix = [ + const matrix = [ 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, @@ -180,7 +180,7 @@ { rotation = (rotation || 0) / 180 * Math.PI; - let cosR = Math.cos(rotation), + const cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; @@ -197,22 +197,22 @@ see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - let w = 1/3, sqrW = sqrt(w);//weight is + const w = 1/3, sqrW = sqrt(w);//weight is - let a00 = cosR + (1.0 - cosR) * w; - let a01 = w * (1.0 - cosR) - sqrW * sinR; - let a02 = w * (1.0 - cosR) + sqrW * sinR; + const a00 = cosR + (1.0 - cosR) * w; + const a01 = w * (1.0 - cosR) - sqrW * sinR; + const a02 = w * (1.0 - cosR) + sqrW * sinR; - let a10 = w * (1.0 - cosR) + sqrW * sinR; - let a11 = cosR + w*(1.0 - cosR); - let a12 = w * (1.0 - cosR) - sqrW * sinR; + const a10 = w * (1.0 - cosR) + sqrW * sinR; + const a11 = cosR + w*(1.0 - cosR); + const a12 = w * (1.0 - cosR) - sqrW * sinR; - let a20 = w * (1.0 - cosR) - sqrW * sinR; - let a21 = w * (1.0 - cosR) + sqrW * sinR; - let a22 = cosR + w * (1.0 - cosR); + const a20 = w * (1.0 - cosR) - sqrW * sinR; + const a21 = w * (1.0 - cosR) + sqrW * sinR; + const a22 = cosR + w * (1.0 - cosR); - let matrix = [ + const matrix = [ a00, a01, a02, 0, 0, a10, a11, a12, 0, 0, a20, a21, a22, 0, 0, @@ -233,10 +233,10 @@ */ contrast(amount, multiply) { - let v = (amount || 0) + 1; - let o = -128 * (v - 1); + const v = (amount || 0) + 1; + const o = -128 * (v - 1); - let matrix = [ + const matrix = [ v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, @@ -255,10 +255,10 @@ */ saturate(amount, multiply) { - let x = (amount || 0) * 2 / 3 + 1; - let y = ((x - 1) * -0.5); + const x = (amount || 0) * 2 / 3 + 1; + const y = ((x - 1) * -0.5); - let matrix = [ + const matrix = [ x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, @@ -286,7 +286,7 @@ */ negative(multiply) { - let matrix = [ + const matrix = [ 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, @@ -303,7 +303,7 @@ */ sepia(multiply) { - let matrix = [ + const matrix = [ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, @@ -320,7 +320,7 @@ */ technicolor(multiply) { - let matrix = [ + const matrix = [ 1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138, @@ -337,7 +337,7 @@ */ polaroid(multiply) { - let matrix = [ + const matrix = [ 1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, @@ -354,7 +354,7 @@ */ toBGR(multiply) { - let matrix = [ + const matrix = [ 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, @@ -371,7 +371,7 @@ */ kodachrome(multiply) { - let matrix = [ + const matrix = [ 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, @@ -388,7 +388,7 @@ */ browni(multiply) { - let matrix = [ + const matrix = [ 0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283, @@ -405,7 +405,7 @@ */ vintage(multiply) { - let matrix = [ + const matrix = [ 0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123, 0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591, 0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296, @@ -432,15 +432,15 @@ lightColor = lightColor || 0xFFE580; darkColor = darkColor || 0x338000; - let lR = ((lightColor >> 16) & 0xFF) / 255; - let lG = ((lightColor >> 8) & 0xFF) / 255; - let lB = (lightColor & 0xFF) / 255; + const lR = ((lightColor >> 16) & 0xFF) / 255; + const lG = ((lightColor >> 8) & 0xFF) / 255; + const lB = (lightColor & 0xFF) / 255; - let dR = ((darkColor >> 16) & 0xFF) / 255; - let dG = ((darkColor >> 8) & 0xFF) / 255; - let dB = (darkColor & 0xFF) / 255; + const dR = ((darkColor >> 16) & 0xFF) / 255; + const dG = ((darkColor >> 8) & 0xFF) / 255; + const dB = (darkColor & 0xFF) / 255; - let matrix = [ + const matrix = [ 0.3, 0.59, 0.11, 0, 0, lR, lG, lB, desaturation, 0, dR, dG, dB, toned, 0, @@ -459,7 +459,7 @@ night(intensity, multiply) { intensity = intensity || 0.1; - let matrix = [ + const matrix = [ intensity * ( -2.0), -intensity, 0, 0, 0, -intensity, 0, intensity, 0, 0, 0, intensity, intensity * 2.0, 0, 0, @@ -480,7 +480,7 @@ */ predator(amount, multiply) { - let matrix = [ + const matrix = [ 11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount, -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount, -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount, @@ -500,7 +500,7 @@ */ lsd(multiply) { - let matrix = [ + const matrix = [ 2, -0.4, 0.5, 0, 0, -0.5, 2, -0.4, 0, 0, -0.4, -0.5, 3, 0, 0, @@ -516,7 +516,7 @@ */ reset() { - let matrix = [ + const matrix = [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, @@ -546,4 +546,4 @@ //Americanized alias ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale; -export default ColorMatrixFilter; \ No newline at end of file +export default ColorMatrixFilter; diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index d222540..862acc9 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -16,7 +16,7 @@ { constructor(sprite, scale) { - let maskMatrix = new core.Matrix(); + const maskMatrix = new core.Matrix(); sprite.renderable = false; super( @@ -45,7 +45,7 @@ apply(filterManager, input, output) { - let ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); + const ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; @@ -71,4 +71,4 @@ } } -export default DisplacementFilter; \ No newline at end of file +export default DisplacementFilter; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index eb6623e..d5c1467 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,7 @@ target: null, type: null, data: this.mouse, - stopPropagation:function(){ + stopPropagation(){ this.stopped = true; } }; @@ -324,13 +324,13 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution) + setTargetElement(element, resolution=1) { this.removeEvents(); this.interactionDOMElement = element; - this.resolution = resolution || 1; + this.resolution = resolution; this.addEvents(); } @@ -557,7 +557,7 @@ // This will allow pixi to completly ignore and bypass checking the displayObjects children. if(displayObject.interactiveChildren) { - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length-1; i >= 0; i--) { @@ -700,10 +700,10 @@ */ processMouseUp( displayObject, hit ) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; - let isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isRightButton = e.button === 2 || e.which === 3; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; if(hit) { @@ -862,14 +862,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; //TODO POOL - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -914,14 +914,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -980,14 +980,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -1026,12 +1026,7 @@ */ getTouchData(touchEvent) { - let touchData = this.interactiveDataPool.pop(); - - if(!touchData) - { - touchData = new InteractionData(); - } + const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index e32ee4c..4b034b1 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -4,9 +4,9 @@ import path from 'path'; function parse(resource, texture) { - let data = {}; - let info = resource.data.getElementsByTagName('info')[0]; - let common = resource.data.getElementsByTagName('common')[0]; + const data = {}; + const info = resource.data.getElementsByTagName('info')[0]; + const common = resource.data.getElementsByTagName('common')[0]; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); @@ -18,9 +18,9 @@ for (let i = 0; i < letters.length; i++) { - let charCode = parseInt(letters[i].getAttribute('id'), 10); + const charCode = parseInt(letters[i].getAttribute('id'), 10); - let textureRect = new core.Rectangle( + const textureRect = new core.Rectangle( parseInt(letters[i].getAttribute('x'), 10) + texture.frame.x, parseInt(letters[i].getAttribute('y'), 10) + texture.frame.y, parseInt(letters[i].getAttribute('width'), 10), @@ -38,12 +38,12 @@ } //parse kernings - let kernings = resource.data.getElementsByTagName('kerning'); + const kernings = resource.data.getElementsByTagName('kerning'); for (let i = 0; i < kernings.length; i++) { - let first = parseInt(kernings[i].getAttribute('first'), 10); - let second = parseInt(kernings[i].getAttribute('second'), 10); - let amount = parseInt(kernings[i].getAttribute('amount'), 10); + const first = parseInt(kernings[i].getAttribute('first'), 10); + const second = parseInt(kernings[i].getAttribute('second'), 10); + const amount = parseInt(kernings[i].getAttribute('amount'), 10); if(data.chars[second]) { @@ -96,12 +96,12 @@ xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } - + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { xmlUrl += '/'; } - + let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); if (core.utils.TextureCache[textureUrl]) { //reuse existing texture @@ -115,7 +115,7 @@ metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, function (res) { + this.add(resource.name + '_image', textureUrl, loadOptions, res => { parse(resource, res.texture); next(); }); diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 3fa8b7f..34a60b4 100644 --- a/src/loaders/spritesheetParser.js +++ b/src/loaders/spritesheetParser.js @@ -9,7 +9,7 @@ return function (resource, next) { let resourcePath; - let imageResourceName = resource.name + '_image'; + let imageResourceName = `${resource.name}_image`; // skip if no data, its not json, it isn't spritesheet data, or the image resource already exists if (!resource.data || !resource.isJson || !resource.data.frames || this.resources[imageResourceName]) @@ -17,7 +17,7 @@ return next(); } - let loadOptions = { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata @@ -30,7 +30,7 @@ } else { - resourcePath = path.dirname(resource.url.replace(this.baseUrl, '')) + '/' + resource.data.meta.image; + resourcePath = `${path.dirname(resource.url.replace(this.baseUrl, ''))}/${resource.data.meta.image}`; } // load the image for this sheet @@ -38,9 +38,9 @@ { resource.textures = {}; - let frames = resource.data.frames; - let frameKeys = Object.keys(frames); - let resolution = core.utils.getResolutionOfUrl(resource.url); + const frames = resource.data.frames; + const frameKeys = Object.keys(frames); + const resolution = core.utils.getResolutionOfUrl(resource.url); let batchIndex = 0; function processFrames(initialFrameIndex, maxFrames) @@ -50,14 +50,14 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { let i = frameKeys[frameIndex]; - let rect = frames[i].frame; + const rect = frames[i].frame; if (rect) { let frame = null; let trim = null; - let orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); + const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); if (frames[i].rotated) { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); @@ -101,7 +101,7 @@ } function iteration() { - processNextBatch(function() { + processNextBatch(() => { if (shouldProcessNextBatch()) { iteration(); } else { diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index f269992..0c2eff2 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -122,7 +122,7 @@ renderer.flush(); // renderer.plugins.mesh.render(this); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -172,7 +172,7 @@ glData.shader.uniforms.alpha = this.worldAlpha; glData.shader.uniforms.tint = this.tintRgb; - let drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; + const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() .draw(drawMode, this.indices.length) @@ -187,10 +187,10 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -220,16 +220,16 @@ _renderCanvasTriangleMesh(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; + const vertices = this.vertices; + const uvs = this.uvs; - let length = vertices.length / 2; + const length = vertices.length / 2; // this.count++; for (let i = 0; i < length - 2; i++) { // draw some triangles! - let index = i * 2; + const index = i * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index, (index + 2), (index + 4)); } } @@ -243,17 +243,17 @@ _renderCanvasTriangles(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; - let indices = this.indices; + const vertices = this.vertices; + const uvs = this.uvs; + const indices = this.indices; - let length = indices.length; + const length = indices.length; // this.count++; for (let i = 0; i < length; i += 3) { // draw some triangles! - let index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; + const index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2); } } @@ -271,23 +271,23 @@ */ _renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2) { - let base = this._texture.baseTexture; - let textureSource = base.source; - let textureWidth = base.width; - let textureHeight = base.height; + const base = this._texture.baseTexture; + const textureSource = base.source; + const textureWidth = base.width; + const textureHeight = base.height; let x0 = vertices[index0], x1 = vertices[index1], x2 = vertices[index2]; let y0 = vertices[index0 + 1], y1 = vertices[index1 + 1], y2 = vertices[index2 + 1]; - let u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; - let v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; + const u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; + const v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; if (this.canvasPadding > 0) { - let paddingX = this.canvasPadding / this.worldTransform.a; - let paddingY = this.canvasPadding / this.worldTransform.d; - let centerX = (x0 + x1 + x2) / 3; - let centerY = (y0 + y1 + y2) / 3; + const paddingX = this.canvasPadding / this.worldTransform.a; + const paddingY = this.canvasPadding / this.worldTransform.d; + const centerX = (x0 + x1 + x2) / 3; + const centerY = (y0 + y1 + y2) / 3; let normX = x0 - centerX; let normY = y0 - centerY; @@ -326,13 +326,13 @@ context.clip(); // Compute matrix transform - let delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); - let deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); - let deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); - let deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); - let deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); - let deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); - let deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); + const delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); + const deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); + const deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); + const deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); + const deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); + const deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); + const deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); context.transform(deltaA / delta, deltaD / delta, deltaB / delta, deltaE / delta, @@ -352,20 +352,20 @@ */ renderMeshFlat(Mesh) { - let context = this.context; - let vertices = Mesh.vertices; + const context = this.context; + const vertices = Mesh.vertices; - let length = vertices.length/2; + const length = vertices.length/2; // this.count++; context.beginPath(); for (let i=1; i < length-2; i++) { // draw some triangles! - let index = i*2; + const index = i*2; - let x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; - let y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; + const x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; + const y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; context.moveTo(x0, y0); context.lineTo(x1, y1); diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index df10640..b179b10 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -5,7 +5,7 @@ /** * The NineSlicePlane allows you to stretch a texture using 9-slice scaling. The corners will remain unscaled (useful * for buttons with rounded corners for example) and the other areas will be scaled horizontally and or vertically - * + * *```js * let Plane9 = new PIXI.NineSlicePlane(PIXI.Texture.fromImage('BoxWithRoundedCorners.png'), 15, 15, 15, 15); * ``` @@ -44,7 +44,7 @@ { super(texture, 4, 4); - let uvs = this.uvs; + const uvs = this.uvs; // right and bottom uv's are always 1 uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; @@ -102,14 +102,14 @@ } updateHorizontalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[9] = vertices[11] = vertices[13] = vertices[15] = this._topHeight; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - this._bottomHeight; vertices[25] = vertices[27] = vertices[29] = vertices[31] = this._height; } updateVerticalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[2] = vertices[10] = vertices[18] = vertices[26] = this._leftWidth; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - this._rightWidth; vertices[6] = vertices[14] = vertices[22] = vertices[30] = this._width ; @@ -123,11 +123,11 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; context.globalAlpha = this.worldAlpha; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -137,12 +137,12 @@ { context.setTransform(transform.a * res, transform.b * res, transform.c * res, transform.d * res, transform.tx * res, transform.ty * res); } - - let base = this._texture.baseTexture; - let textureSource = base.source; - let w = base.width; - let h = base.height; - + + const base = this._texture.baseTexture; + const textureSource = base.source; + const w = base.width; + const h = base.height; + this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); this.drawSegment(context, textureSource, w, h, 4, 5, 14, 15); @@ -163,8 +163,8 @@ * @param textureSource * @param w width of the texture * @param h height of the texture - * @param x1 - * @param y1 + * @param x1 + * @param y1 * @param x2 * @param y2 * @private @@ -172,14 +172,14 @@ drawSegment(context, textureSource, w, h, x1, y1, x2, y2) { // otherwise you get weird results when using slices of that are 0 wide or high. - let uvs = this.uvs; - let vertices = this.vertices; - + const uvs = this.uvs; + const vertices = this.vertices; + let sw = (uvs[x2]-uvs[x1]) * w; let sh = (uvs[y2]-uvs[y1]) * h; let dw = vertices[x2] - vertices[x1]; let dh = vertices[y2] - vertices[y1]; - + // make sure the source is at least 1 pixel wide and high, otherwise nothing will be drawn. if (sw<1) { sw=1; @@ -213,7 +213,7 @@ this._width = value; this.updateVerticalVertices(); } - + /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -231,7 +231,7 @@ this._height = value; this.updateHorizontalVertices(); } - + /** * The width of the left column @@ -245,13 +245,13 @@ set leftWidth (value) { this._leftWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; this.dirty=true; } - + /** * The width of the right column * @@ -264,13 +264,13 @@ set rightWidth(value) { this._rightWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - this._uvw * value; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; this.dirty=true; } - + /** * The height of the top row @@ -284,13 +284,13 @@ set topHeight(value) { this._topHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; this.dirty=true; } - + /** * The height of the bottom row * @@ -303,12 +303,12 @@ set bottomHeight(value) { this._bottomHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - this._uvh * value; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; this.dirty=true; } } -export default NineSlicePlane; \ No newline at end of file +export default NineSlicePlane; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index a83aa79..da79b08 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -107,7 +107,7 @@ _colorMatrix(matrix) { // Create a Float32 Array and normalize the offset component to 0-1 - let m = new Float32Array(matrix); + const m = new Float32Array(matrix); m[4] /= 255; m[9] /= 255; m[14] /= 255; @@ -124,7 +124,7 @@ */ brightness(b, multiply) { - let matrix = [ + const matrix = [ b, 0, 0, 0, 0, 0, b, 0, 0, 0, 0, 0, b, 0, 0, @@ -142,7 +142,7 @@ */ greyscale(scale, multiply) { - let matrix = [ + const matrix = [ scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, @@ -160,7 +160,7 @@ */ blackAndWhite(multiply) { - let matrix = [ + const matrix = [ 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, @@ -180,7 +180,7 @@ { rotation = (rotation || 0) / 180 * Math.PI; - let cosR = Math.cos(rotation), + const cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; @@ -197,22 +197,22 @@ see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - let w = 1/3, sqrW = sqrt(w);//weight is + const w = 1/3, sqrW = sqrt(w);//weight is - let a00 = cosR + (1.0 - cosR) * w; - let a01 = w * (1.0 - cosR) - sqrW * sinR; - let a02 = w * (1.0 - cosR) + sqrW * sinR; + const a00 = cosR + (1.0 - cosR) * w; + const a01 = w * (1.0 - cosR) - sqrW * sinR; + const a02 = w * (1.0 - cosR) + sqrW * sinR; - let a10 = w * (1.0 - cosR) + sqrW * sinR; - let a11 = cosR + w*(1.0 - cosR); - let a12 = w * (1.0 - cosR) - sqrW * sinR; + const a10 = w * (1.0 - cosR) + sqrW * sinR; + const a11 = cosR + w*(1.0 - cosR); + const a12 = w * (1.0 - cosR) - sqrW * sinR; - let a20 = w * (1.0 - cosR) - sqrW * sinR; - let a21 = w * (1.0 - cosR) + sqrW * sinR; - let a22 = cosR + w * (1.0 - cosR); + const a20 = w * (1.0 - cosR) - sqrW * sinR; + const a21 = w * (1.0 - cosR) + sqrW * sinR; + const a22 = cosR + w * (1.0 - cosR); - let matrix = [ + const matrix = [ a00, a01, a02, 0, 0, a10, a11, a12, 0, 0, a20, a21, a22, 0, 0, @@ -233,10 +233,10 @@ */ contrast(amount, multiply) { - let v = (amount || 0) + 1; - let o = -128 * (v - 1); + const v = (amount || 0) + 1; + const o = -128 * (v - 1); - let matrix = [ + const matrix = [ v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, @@ -255,10 +255,10 @@ */ saturate(amount, multiply) { - let x = (amount || 0) * 2 / 3 + 1; - let y = ((x - 1) * -0.5); + const x = (amount || 0) * 2 / 3 + 1; + const y = ((x - 1) * -0.5); - let matrix = [ + const matrix = [ x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, @@ -286,7 +286,7 @@ */ negative(multiply) { - let matrix = [ + const matrix = [ 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, @@ -303,7 +303,7 @@ */ sepia(multiply) { - let matrix = [ + const matrix = [ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, @@ -320,7 +320,7 @@ */ technicolor(multiply) { - let matrix = [ + const matrix = [ 1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138, @@ -337,7 +337,7 @@ */ polaroid(multiply) { - let matrix = [ + const matrix = [ 1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, @@ -354,7 +354,7 @@ */ toBGR(multiply) { - let matrix = [ + const matrix = [ 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, @@ -371,7 +371,7 @@ */ kodachrome(multiply) { - let matrix = [ + const matrix = [ 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, @@ -388,7 +388,7 @@ */ browni(multiply) { - let matrix = [ + const matrix = [ 0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283, @@ -405,7 +405,7 @@ */ vintage(multiply) { - let matrix = [ + const matrix = [ 0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123, 0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591, 0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296, @@ -432,15 +432,15 @@ lightColor = lightColor || 0xFFE580; darkColor = darkColor || 0x338000; - let lR = ((lightColor >> 16) & 0xFF) / 255; - let lG = ((lightColor >> 8) & 0xFF) / 255; - let lB = (lightColor & 0xFF) / 255; + const lR = ((lightColor >> 16) & 0xFF) / 255; + const lG = ((lightColor >> 8) & 0xFF) / 255; + const lB = (lightColor & 0xFF) / 255; - let dR = ((darkColor >> 16) & 0xFF) / 255; - let dG = ((darkColor >> 8) & 0xFF) / 255; - let dB = (darkColor & 0xFF) / 255; + const dR = ((darkColor >> 16) & 0xFF) / 255; + const dG = ((darkColor >> 8) & 0xFF) / 255; + const dB = (darkColor & 0xFF) / 255; - let matrix = [ + const matrix = [ 0.3, 0.59, 0.11, 0, 0, lR, lG, lB, desaturation, 0, dR, dG, dB, toned, 0, @@ -459,7 +459,7 @@ night(intensity, multiply) { intensity = intensity || 0.1; - let matrix = [ + const matrix = [ intensity * ( -2.0), -intensity, 0, 0, 0, -intensity, 0, intensity, 0, 0, 0, intensity, intensity * 2.0, 0, 0, @@ -480,7 +480,7 @@ */ predator(amount, multiply) { - let matrix = [ + const matrix = [ 11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount, -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount, -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount, @@ -500,7 +500,7 @@ */ lsd(multiply) { - let matrix = [ + const matrix = [ 2, -0.4, 0.5, 0, 0, -0.5, 2, -0.4, 0, 0, -0.4, -0.5, 3, 0, 0, @@ -516,7 +516,7 @@ */ reset() { - let matrix = [ + const matrix = [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, @@ -546,4 +546,4 @@ //Americanized alias ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale; -export default ColorMatrixFilter; \ No newline at end of file +export default ColorMatrixFilter; diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index d222540..862acc9 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -16,7 +16,7 @@ { constructor(sprite, scale) { - let maskMatrix = new core.Matrix(); + const maskMatrix = new core.Matrix(); sprite.renderable = false; super( @@ -45,7 +45,7 @@ apply(filterManager, input, output) { - let ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); + const ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; @@ -71,4 +71,4 @@ } } -export default DisplacementFilter; \ No newline at end of file +export default DisplacementFilter; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index eb6623e..d5c1467 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,7 @@ target: null, type: null, data: this.mouse, - stopPropagation:function(){ + stopPropagation(){ this.stopped = true; } }; @@ -324,13 +324,13 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution) + setTargetElement(element, resolution=1) { this.removeEvents(); this.interactionDOMElement = element; - this.resolution = resolution || 1; + this.resolution = resolution; this.addEvents(); } @@ -557,7 +557,7 @@ // This will allow pixi to completly ignore and bypass checking the displayObjects children. if(displayObject.interactiveChildren) { - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length-1; i >= 0; i--) { @@ -700,10 +700,10 @@ */ processMouseUp( displayObject, hit ) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; - let isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isRightButton = e.button === 2 || e.which === 3; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; if(hit) { @@ -862,14 +862,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; //TODO POOL - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -914,14 +914,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -980,14 +980,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -1026,12 +1026,7 @@ */ getTouchData(touchEvent) { - let touchData = this.interactiveDataPool.pop(); - - if(!touchData) - { - touchData = new InteractionData(); - } + const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index e32ee4c..4b034b1 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -4,9 +4,9 @@ import path from 'path'; function parse(resource, texture) { - let data = {}; - let info = resource.data.getElementsByTagName('info')[0]; - let common = resource.data.getElementsByTagName('common')[0]; + const data = {}; + const info = resource.data.getElementsByTagName('info')[0]; + const common = resource.data.getElementsByTagName('common')[0]; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); @@ -18,9 +18,9 @@ for (let i = 0; i < letters.length; i++) { - let charCode = parseInt(letters[i].getAttribute('id'), 10); + const charCode = parseInt(letters[i].getAttribute('id'), 10); - let textureRect = new core.Rectangle( + const textureRect = new core.Rectangle( parseInt(letters[i].getAttribute('x'), 10) + texture.frame.x, parseInt(letters[i].getAttribute('y'), 10) + texture.frame.y, parseInt(letters[i].getAttribute('width'), 10), @@ -38,12 +38,12 @@ } //parse kernings - let kernings = resource.data.getElementsByTagName('kerning'); + const kernings = resource.data.getElementsByTagName('kerning'); for (let i = 0; i < kernings.length; i++) { - let first = parseInt(kernings[i].getAttribute('first'), 10); - let second = parseInt(kernings[i].getAttribute('second'), 10); - let amount = parseInt(kernings[i].getAttribute('amount'), 10); + const first = parseInt(kernings[i].getAttribute('first'), 10); + const second = parseInt(kernings[i].getAttribute('second'), 10); + const amount = parseInt(kernings[i].getAttribute('amount'), 10); if(data.chars[second]) { @@ -96,12 +96,12 @@ xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } - + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { xmlUrl += '/'; } - + let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); if (core.utils.TextureCache[textureUrl]) { //reuse existing texture @@ -115,7 +115,7 @@ metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, function (res) { + this.add(resource.name + '_image', textureUrl, loadOptions, res => { parse(resource, res.texture); next(); }); diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 3fa8b7f..34a60b4 100644 --- a/src/loaders/spritesheetParser.js +++ b/src/loaders/spritesheetParser.js @@ -9,7 +9,7 @@ return function (resource, next) { let resourcePath; - let imageResourceName = resource.name + '_image'; + let imageResourceName = `${resource.name}_image`; // skip if no data, its not json, it isn't spritesheet data, or the image resource already exists if (!resource.data || !resource.isJson || !resource.data.frames || this.resources[imageResourceName]) @@ -17,7 +17,7 @@ return next(); } - let loadOptions = { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata @@ -30,7 +30,7 @@ } else { - resourcePath = path.dirname(resource.url.replace(this.baseUrl, '')) + '/' + resource.data.meta.image; + resourcePath = `${path.dirname(resource.url.replace(this.baseUrl, ''))}/${resource.data.meta.image}`; } // load the image for this sheet @@ -38,9 +38,9 @@ { resource.textures = {}; - let frames = resource.data.frames; - let frameKeys = Object.keys(frames); - let resolution = core.utils.getResolutionOfUrl(resource.url); + const frames = resource.data.frames; + const frameKeys = Object.keys(frames); + const resolution = core.utils.getResolutionOfUrl(resource.url); let batchIndex = 0; function processFrames(initialFrameIndex, maxFrames) @@ -50,14 +50,14 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { let i = frameKeys[frameIndex]; - let rect = frames[i].frame; + const rect = frames[i].frame; if (rect) { let frame = null; let trim = null; - let orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); + const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); if (frames[i].rotated) { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); @@ -101,7 +101,7 @@ } function iteration() { - processNextBatch(function() { + processNextBatch(() => { if (shouldProcessNextBatch()) { iteration(); } else { diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index f269992..0c2eff2 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -122,7 +122,7 @@ renderer.flush(); // renderer.plugins.mesh.render(this); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -172,7 +172,7 @@ glData.shader.uniforms.alpha = this.worldAlpha; glData.shader.uniforms.tint = this.tintRgb; - let drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; + const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() .draw(drawMode, this.indices.length) @@ -187,10 +187,10 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -220,16 +220,16 @@ _renderCanvasTriangleMesh(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; + const vertices = this.vertices; + const uvs = this.uvs; - let length = vertices.length / 2; + const length = vertices.length / 2; // this.count++; for (let i = 0; i < length - 2; i++) { // draw some triangles! - let index = i * 2; + const index = i * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index, (index + 2), (index + 4)); } } @@ -243,17 +243,17 @@ _renderCanvasTriangles(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; - let indices = this.indices; + const vertices = this.vertices; + const uvs = this.uvs; + const indices = this.indices; - let length = indices.length; + const length = indices.length; // this.count++; for (let i = 0; i < length; i += 3) { // draw some triangles! - let index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; + const index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2); } } @@ -271,23 +271,23 @@ */ _renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2) { - let base = this._texture.baseTexture; - let textureSource = base.source; - let textureWidth = base.width; - let textureHeight = base.height; + const base = this._texture.baseTexture; + const textureSource = base.source; + const textureWidth = base.width; + const textureHeight = base.height; let x0 = vertices[index0], x1 = vertices[index1], x2 = vertices[index2]; let y0 = vertices[index0 + 1], y1 = vertices[index1 + 1], y2 = vertices[index2 + 1]; - let u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; - let v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; + const u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; + const v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; if (this.canvasPadding > 0) { - let paddingX = this.canvasPadding / this.worldTransform.a; - let paddingY = this.canvasPadding / this.worldTransform.d; - let centerX = (x0 + x1 + x2) / 3; - let centerY = (y0 + y1 + y2) / 3; + const paddingX = this.canvasPadding / this.worldTransform.a; + const paddingY = this.canvasPadding / this.worldTransform.d; + const centerX = (x0 + x1 + x2) / 3; + const centerY = (y0 + y1 + y2) / 3; let normX = x0 - centerX; let normY = y0 - centerY; @@ -326,13 +326,13 @@ context.clip(); // Compute matrix transform - let delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); - let deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); - let deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); - let deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); - let deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); - let deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); - let deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); + const delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); + const deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); + const deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); + const deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); + const deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); + const deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); + const deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); context.transform(deltaA / delta, deltaD / delta, deltaB / delta, deltaE / delta, @@ -352,20 +352,20 @@ */ renderMeshFlat(Mesh) { - let context = this.context; - let vertices = Mesh.vertices; + const context = this.context; + const vertices = Mesh.vertices; - let length = vertices.length/2; + const length = vertices.length/2; // this.count++; context.beginPath(); for (let i=1; i < length-2; i++) { // draw some triangles! - let index = i*2; + const index = i*2; - let x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; - let y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; + const x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; + const y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; context.moveTo(x0, y0); context.lineTo(x1, y1); diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index df10640..b179b10 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -5,7 +5,7 @@ /** * The NineSlicePlane allows you to stretch a texture using 9-slice scaling. The corners will remain unscaled (useful * for buttons with rounded corners for example) and the other areas will be scaled horizontally and or vertically - * + * *```js * let Plane9 = new PIXI.NineSlicePlane(PIXI.Texture.fromImage('BoxWithRoundedCorners.png'), 15, 15, 15, 15); * ``` @@ -44,7 +44,7 @@ { super(texture, 4, 4); - let uvs = this.uvs; + const uvs = this.uvs; // right and bottom uv's are always 1 uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; @@ -102,14 +102,14 @@ } updateHorizontalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[9] = vertices[11] = vertices[13] = vertices[15] = this._topHeight; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - this._bottomHeight; vertices[25] = vertices[27] = vertices[29] = vertices[31] = this._height; } updateVerticalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[2] = vertices[10] = vertices[18] = vertices[26] = this._leftWidth; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - this._rightWidth; vertices[6] = vertices[14] = vertices[22] = vertices[30] = this._width ; @@ -123,11 +123,11 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; context.globalAlpha = this.worldAlpha; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -137,12 +137,12 @@ { context.setTransform(transform.a * res, transform.b * res, transform.c * res, transform.d * res, transform.tx * res, transform.ty * res); } - - let base = this._texture.baseTexture; - let textureSource = base.source; - let w = base.width; - let h = base.height; - + + const base = this._texture.baseTexture; + const textureSource = base.source; + const w = base.width; + const h = base.height; + this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); this.drawSegment(context, textureSource, w, h, 4, 5, 14, 15); @@ -163,8 +163,8 @@ * @param textureSource * @param w width of the texture * @param h height of the texture - * @param x1 - * @param y1 + * @param x1 + * @param y1 * @param x2 * @param y2 * @private @@ -172,14 +172,14 @@ drawSegment(context, textureSource, w, h, x1, y1, x2, y2) { // otherwise you get weird results when using slices of that are 0 wide or high. - let uvs = this.uvs; - let vertices = this.vertices; - + const uvs = this.uvs; + const vertices = this.vertices; + let sw = (uvs[x2]-uvs[x1]) * w; let sh = (uvs[y2]-uvs[y1]) * h; let dw = vertices[x2] - vertices[x1]; let dh = vertices[y2] - vertices[y1]; - + // make sure the source is at least 1 pixel wide and high, otherwise nothing will be drawn. if (sw<1) { sw=1; @@ -213,7 +213,7 @@ this._width = value; this.updateVerticalVertices(); } - + /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -231,7 +231,7 @@ this._height = value; this.updateHorizontalVertices(); } - + /** * The width of the left column @@ -245,13 +245,13 @@ set leftWidth (value) { this._leftWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; this.dirty=true; } - + /** * The width of the right column * @@ -264,13 +264,13 @@ set rightWidth(value) { this._rightWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - this._uvw * value; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; this.dirty=true; } - + /** * The height of the top row @@ -284,13 +284,13 @@ set topHeight(value) { this._topHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; this.dirty=true; } - + /** * The height of the bottom row * @@ -303,12 +303,12 @@ set bottomHeight(value) { this._bottomHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - this._uvh * value; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; this.dirty=true; } } -export default NineSlicePlane; \ No newline at end of file +export default NineSlicePlane; diff --git a/src/mesh/Plane.js b/src/mesh/Plane.js index a1d7cdc..27182f6 100644 --- a/src/mesh/Plane.js +++ b/src/mesh/Plane.js @@ -46,24 +46,23 @@ */ refresh() { - let total = this.verticesX * this.verticesY; - let verts = []; - let colors = []; - let uvs = []; - let indices = []; - let texture = this.texture; + const total = this.verticesX * this.verticesY; + const verts = []; + const colors = []; + const uvs = []; + const indices = []; + const texture = this.texture; - let segmentsX = this.verticesX - 1; - let segmentsY = this.verticesY - 1; - let i = 0; + const segmentsX = this.verticesX - 1; + const segmentsY = this.verticesY - 1; - let sizeX = texture.width / segmentsX; - let sizeY = texture.height / segmentsY; + const sizeX = texture.width / segmentsX; + const sizeY = texture.height / segmentsY; - for (i = 0; i < total; i++) { + for (let i = 0; i < total; i++) { - let x = (i % this.verticesX); - let y = ( (i / this.verticesX ) | 0 ); + const x = (i % this.verticesX); + const y = ( (i / this.verticesX ) | 0 ); verts.push((x * sizeX), @@ -77,16 +76,16 @@ let totalSub = segmentsX * segmentsY; - for (i = 0; i < totalSub; i++) { + for (let i = 0; i < totalSub; i++) { - let xpos = i % segmentsX; - let ypos = (i / segmentsX ) | 0; + const xpos = i % segmentsX; + const ypos = (i / segmentsX ) | 0; - let value = (ypos * this.verticesX) + xpos; - let value2 = (ypos * this.verticesX) + xpos + 1; - let value3 = ((ypos+1) * this.verticesX) + xpos; - let value4 = ((ypos+1) * this.verticesX) + xpos + 1; + const value = (ypos * this.verticesX) + xpos; + const value2 = (ypos * this.verticesX) + xpos + 1; + const value3 = ((ypos+1) * this.verticesX) + xpos; + const value4 = ((ypos+1) * this.verticesX) + xpos + 1; indices.push(value, value2, value3); indices.push(value2, value4, value3); diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index a83aa79..da79b08 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -107,7 +107,7 @@ _colorMatrix(matrix) { // Create a Float32 Array and normalize the offset component to 0-1 - let m = new Float32Array(matrix); + const m = new Float32Array(matrix); m[4] /= 255; m[9] /= 255; m[14] /= 255; @@ -124,7 +124,7 @@ */ brightness(b, multiply) { - let matrix = [ + const matrix = [ b, 0, 0, 0, 0, 0, b, 0, 0, 0, 0, 0, b, 0, 0, @@ -142,7 +142,7 @@ */ greyscale(scale, multiply) { - let matrix = [ + const matrix = [ scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, @@ -160,7 +160,7 @@ */ blackAndWhite(multiply) { - let matrix = [ + const matrix = [ 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, @@ -180,7 +180,7 @@ { rotation = (rotation || 0) / 180 * Math.PI; - let cosR = Math.cos(rotation), + const cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; @@ -197,22 +197,22 @@ see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - let w = 1/3, sqrW = sqrt(w);//weight is + const w = 1/3, sqrW = sqrt(w);//weight is - let a00 = cosR + (1.0 - cosR) * w; - let a01 = w * (1.0 - cosR) - sqrW * sinR; - let a02 = w * (1.0 - cosR) + sqrW * sinR; + const a00 = cosR + (1.0 - cosR) * w; + const a01 = w * (1.0 - cosR) - sqrW * sinR; + const a02 = w * (1.0 - cosR) + sqrW * sinR; - let a10 = w * (1.0 - cosR) + sqrW * sinR; - let a11 = cosR + w*(1.0 - cosR); - let a12 = w * (1.0 - cosR) - sqrW * sinR; + const a10 = w * (1.0 - cosR) + sqrW * sinR; + const a11 = cosR + w*(1.0 - cosR); + const a12 = w * (1.0 - cosR) - sqrW * sinR; - let a20 = w * (1.0 - cosR) - sqrW * sinR; - let a21 = w * (1.0 - cosR) + sqrW * sinR; - let a22 = cosR + w * (1.0 - cosR); + const a20 = w * (1.0 - cosR) - sqrW * sinR; + const a21 = w * (1.0 - cosR) + sqrW * sinR; + const a22 = cosR + w * (1.0 - cosR); - let matrix = [ + const matrix = [ a00, a01, a02, 0, 0, a10, a11, a12, 0, 0, a20, a21, a22, 0, 0, @@ -233,10 +233,10 @@ */ contrast(amount, multiply) { - let v = (amount || 0) + 1; - let o = -128 * (v - 1); + const v = (amount || 0) + 1; + const o = -128 * (v - 1); - let matrix = [ + const matrix = [ v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, @@ -255,10 +255,10 @@ */ saturate(amount, multiply) { - let x = (amount || 0) * 2 / 3 + 1; - let y = ((x - 1) * -0.5); + const x = (amount || 0) * 2 / 3 + 1; + const y = ((x - 1) * -0.5); - let matrix = [ + const matrix = [ x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, @@ -286,7 +286,7 @@ */ negative(multiply) { - let matrix = [ + const matrix = [ 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, @@ -303,7 +303,7 @@ */ sepia(multiply) { - let matrix = [ + const matrix = [ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, @@ -320,7 +320,7 @@ */ technicolor(multiply) { - let matrix = [ + const matrix = [ 1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138, @@ -337,7 +337,7 @@ */ polaroid(multiply) { - let matrix = [ + const matrix = [ 1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, @@ -354,7 +354,7 @@ */ toBGR(multiply) { - let matrix = [ + const matrix = [ 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, @@ -371,7 +371,7 @@ */ kodachrome(multiply) { - let matrix = [ + const matrix = [ 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, @@ -388,7 +388,7 @@ */ browni(multiply) { - let matrix = [ + const matrix = [ 0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283, @@ -405,7 +405,7 @@ */ vintage(multiply) { - let matrix = [ + const matrix = [ 0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123, 0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591, 0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296, @@ -432,15 +432,15 @@ lightColor = lightColor || 0xFFE580; darkColor = darkColor || 0x338000; - let lR = ((lightColor >> 16) & 0xFF) / 255; - let lG = ((lightColor >> 8) & 0xFF) / 255; - let lB = (lightColor & 0xFF) / 255; + const lR = ((lightColor >> 16) & 0xFF) / 255; + const lG = ((lightColor >> 8) & 0xFF) / 255; + const lB = (lightColor & 0xFF) / 255; - let dR = ((darkColor >> 16) & 0xFF) / 255; - let dG = ((darkColor >> 8) & 0xFF) / 255; - let dB = (darkColor & 0xFF) / 255; + const dR = ((darkColor >> 16) & 0xFF) / 255; + const dG = ((darkColor >> 8) & 0xFF) / 255; + const dB = (darkColor & 0xFF) / 255; - let matrix = [ + const matrix = [ 0.3, 0.59, 0.11, 0, 0, lR, lG, lB, desaturation, 0, dR, dG, dB, toned, 0, @@ -459,7 +459,7 @@ night(intensity, multiply) { intensity = intensity || 0.1; - let matrix = [ + const matrix = [ intensity * ( -2.0), -intensity, 0, 0, 0, -intensity, 0, intensity, 0, 0, 0, intensity, intensity * 2.0, 0, 0, @@ -480,7 +480,7 @@ */ predator(amount, multiply) { - let matrix = [ + const matrix = [ 11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount, -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount, -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount, @@ -500,7 +500,7 @@ */ lsd(multiply) { - let matrix = [ + const matrix = [ 2, -0.4, 0.5, 0, 0, -0.5, 2, -0.4, 0, 0, -0.4, -0.5, 3, 0, 0, @@ -516,7 +516,7 @@ */ reset() { - let matrix = [ + const matrix = [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, @@ -546,4 +546,4 @@ //Americanized alias ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale; -export default ColorMatrixFilter; \ No newline at end of file +export default ColorMatrixFilter; diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index d222540..862acc9 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -16,7 +16,7 @@ { constructor(sprite, scale) { - let maskMatrix = new core.Matrix(); + const maskMatrix = new core.Matrix(); sprite.renderable = false; super( @@ -45,7 +45,7 @@ apply(filterManager, input, output) { - let ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); + const ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; @@ -71,4 +71,4 @@ } } -export default DisplacementFilter; \ No newline at end of file +export default DisplacementFilter; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index eb6623e..d5c1467 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,7 @@ target: null, type: null, data: this.mouse, - stopPropagation:function(){ + stopPropagation(){ this.stopped = true; } }; @@ -324,13 +324,13 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution) + setTargetElement(element, resolution=1) { this.removeEvents(); this.interactionDOMElement = element; - this.resolution = resolution || 1; + this.resolution = resolution; this.addEvents(); } @@ -557,7 +557,7 @@ // This will allow pixi to completly ignore and bypass checking the displayObjects children. if(displayObject.interactiveChildren) { - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length-1; i >= 0; i--) { @@ -700,10 +700,10 @@ */ processMouseUp( displayObject, hit ) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; - let isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isRightButton = e.button === 2 || e.which === 3; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; if(hit) { @@ -862,14 +862,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; //TODO POOL - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -914,14 +914,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -980,14 +980,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -1026,12 +1026,7 @@ */ getTouchData(touchEvent) { - let touchData = this.interactiveDataPool.pop(); - - if(!touchData) - { - touchData = new InteractionData(); - } + const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index e32ee4c..4b034b1 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -4,9 +4,9 @@ import path from 'path'; function parse(resource, texture) { - let data = {}; - let info = resource.data.getElementsByTagName('info')[0]; - let common = resource.data.getElementsByTagName('common')[0]; + const data = {}; + const info = resource.data.getElementsByTagName('info')[0]; + const common = resource.data.getElementsByTagName('common')[0]; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); @@ -18,9 +18,9 @@ for (let i = 0; i < letters.length; i++) { - let charCode = parseInt(letters[i].getAttribute('id'), 10); + const charCode = parseInt(letters[i].getAttribute('id'), 10); - let textureRect = new core.Rectangle( + const textureRect = new core.Rectangle( parseInt(letters[i].getAttribute('x'), 10) + texture.frame.x, parseInt(letters[i].getAttribute('y'), 10) + texture.frame.y, parseInt(letters[i].getAttribute('width'), 10), @@ -38,12 +38,12 @@ } //parse kernings - let kernings = resource.data.getElementsByTagName('kerning'); + const kernings = resource.data.getElementsByTagName('kerning'); for (let i = 0; i < kernings.length; i++) { - let first = parseInt(kernings[i].getAttribute('first'), 10); - let second = parseInt(kernings[i].getAttribute('second'), 10); - let amount = parseInt(kernings[i].getAttribute('amount'), 10); + const first = parseInt(kernings[i].getAttribute('first'), 10); + const second = parseInt(kernings[i].getAttribute('second'), 10); + const amount = parseInt(kernings[i].getAttribute('amount'), 10); if(data.chars[second]) { @@ -96,12 +96,12 @@ xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } - + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { xmlUrl += '/'; } - + let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); if (core.utils.TextureCache[textureUrl]) { //reuse existing texture @@ -115,7 +115,7 @@ metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, function (res) { + this.add(resource.name + '_image', textureUrl, loadOptions, res => { parse(resource, res.texture); next(); }); diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 3fa8b7f..34a60b4 100644 --- a/src/loaders/spritesheetParser.js +++ b/src/loaders/spritesheetParser.js @@ -9,7 +9,7 @@ return function (resource, next) { let resourcePath; - let imageResourceName = resource.name + '_image'; + let imageResourceName = `${resource.name}_image`; // skip if no data, its not json, it isn't spritesheet data, or the image resource already exists if (!resource.data || !resource.isJson || !resource.data.frames || this.resources[imageResourceName]) @@ -17,7 +17,7 @@ return next(); } - let loadOptions = { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata @@ -30,7 +30,7 @@ } else { - resourcePath = path.dirname(resource.url.replace(this.baseUrl, '')) + '/' + resource.data.meta.image; + resourcePath = `${path.dirname(resource.url.replace(this.baseUrl, ''))}/${resource.data.meta.image}`; } // load the image for this sheet @@ -38,9 +38,9 @@ { resource.textures = {}; - let frames = resource.data.frames; - let frameKeys = Object.keys(frames); - let resolution = core.utils.getResolutionOfUrl(resource.url); + const frames = resource.data.frames; + const frameKeys = Object.keys(frames); + const resolution = core.utils.getResolutionOfUrl(resource.url); let batchIndex = 0; function processFrames(initialFrameIndex, maxFrames) @@ -50,14 +50,14 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { let i = frameKeys[frameIndex]; - let rect = frames[i].frame; + const rect = frames[i].frame; if (rect) { let frame = null; let trim = null; - let orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); + const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); if (frames[i].rotated) { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); @@ -101,7 +101,7 @@ } function iteration() { - processNextBatch(function() { + processNextBatch(() => { if (shouldProcessNextBatch()) { iteration(); } else { diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index f269992..0c2eff2 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -122,7 +122,7 @@ renderer.flush(); // renderer.plugins.mesh.render(this); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -172,7 +172,7 @@ glData.shader.uniforms.alpha = this.worldAlpha; glData.shader.uniforms.tint = this.tintRgb; - let drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; + const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() .draw(drawMode, this.indices.length) @@ -187,10 +187,10 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -220,16 +220,16 @@ _renderCanvasTriangleMesh(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; + const vertices = this.vertices; + const uvs = this.uvs; - let length = vertices.length / 2; + const length = vertices.length / 2; // this.count++; for (let i = 0; i < length - 2; i++) { // draw some triangles! - let index = i * 2; + const index = i * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index, (index + 2), (index + 4)); } } @@ -243,17 +243,17 @@ _renderCanvasTriangles(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; - let indices = this.indices; + const vertices = this.vertices; + const uvs = this.uvs; + const indices = this.indices; - let length = indices.length; + const length = indices.length; // this.count++; for (let i = 0; i < length; i += 3) { // draw some triangles! - let index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; + const index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2); } } @@ -271,23 +271,23 @@ */ _renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2) { - let base = this._texture.baseTexture; - let textureSource = base.source; - let textureWidth = base.width; - let textureHeight = base.height; + const base = this._texture.baseTexture; + const textureSource = base.source; + const textureWidth = base.width; + const textureHeight = base.height; let x0 = vertices[index0], x1 = vertices[index1], x2 = vertices[index2]; let y0 = vertices[index0 + 1], y1 = vertices[index1 + 1], y2 = vertices[index2 + 1]; - let u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; - let v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; + const u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; + const v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; if (this.canvasPadding > 0) { - let paddingX = this.canvasPadding / this.worldTransform.a; - let paddingY = this.canvasPadding / this.worldTransform.d; - let centerX = (x0 + x1 + x2) / 3; - let centerY = (y0 + y1 + y2) / 3; + const paddingX = this.canvasPadding / this.worldTransform.a; + const paddingY = this.canvasPadding / this.worldTransform.d; + const centerX = (x0 + x1 + x2) / 3; + const centerY = (y0 + y1 + y2) / 3; let normX = x0 - centerX; let normY = y0 - centerY; @@ -326,13 +326,13 @@ context.clip(); // Compute matrix transform - let delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); - let deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); - let deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); - let deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); - let deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); - let deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); - let deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); + const delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); + const deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); + const deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); + const deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); + const deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); + const deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); + const deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); context.transform(deltaA / delta, deltaD / delta, deltaB / delta, deltaE / delta, @@ -352,20 +352,20 @@ */ renderMeshFlat(Mesh) { - let context = this.context; - let vertices = Mesh.vertices; + const context = this.context; + const vertices = Mesh.vertices; - let length = vertices.length/2; + const length = vertices.length/2; // this.count++; context.beginPath(); for (let i=1; i < length-2; i++) { // draw some triangles! - let index = i*2; + const index = i*2; - let x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; - let y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; + const x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; + const y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; context.moveTo(x0, y0); context.lineTo(x1, y1); diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index df10640..b179b10 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -5,7 +5,7 @@ /** * The NineSlicePlane allows you to stretch a texture using 9-slice scaling. The corners will remain unscaled (useful * for buttons with rounded corners for example) and the other areas will be scaled horizontally and or vertically - * + * *```js * let Plane9 = new PIXI.NineSlicePlane(PIXI.Texture.fromImage('BoxWithRoundedCorners.png'), 15, 15, 15, 15); * ``` @@ -44,7 +44,7 @@ { super(texture, 4, 4); - let uvs = this.uvs; + const uvs = this.uvs; // right and bottom uv's are always 1 uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; @@ -102,14 +102,14 @@ } updateHorizontalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[9] = vertices[11] = vertices[13] = vertices[15] = this._topHeight; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - this._bottomHeight; vertices[25] = vertices[27] = vertices[29] = vertices[31] = this._height; } updateVerticalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[2] = vertices[10] = vertices[18] = vertices[26] = this._leftWidth; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - this._rightWidth; vertices[6] = vertices[14] = vertices[22] = vertices[30] = this._width ; @@ -123,11 +123,11 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; context.globalAlpha = this.worldAlpha; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -137,12 +137,12 @@ { context.setTransform(transform.a * res, transform.b * res, transform.c * res, transform.d * res, transform.tx * res, transform.ty * res); } - - let base = this._texture.baseTexture; - let textureSource = base.source; - let w = base.width; - let h = base.height; - + + const base = this._texture.baseTexture; + const textureSource = base.source; + const w = base.width; + const h = base.height; + this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); this.drawSegment(context, textureSource, w, h, 4, 5, 14, 15); @@ -163,8 +163,8 @@ * @param textureSource * @param w width of the texture * @param h height of the texture - * @param x1 - * @param y1 + * @param x1 + * @param y1 * @param x2 * @param y2 * @private @@ -172,14 +172,14 @@ drawSegment(context, textureSource, w, h, x1, y1, x2, y2) { // otherwise you get weird results when using slices of that are 0 wide or high. - let uvs = this.uvs; - let vertices = this.vertices; - + const uvs = this.uvs; + const vertices = this.vertices; + let sw = (uvs[x2]-uvs[x1]) * w; let sh = (uvs[y2]-uvs[y1]) * h; let dw = vertices[x2] - vertices[x1]; let dh = vertices[y2] - vertices[y1]; - + // make sure the source is at least 1 pixel wide and high, otherwise nothing will be drawn. if (sw<1) { sw=1; @@ -213,7 +213,7 @@ this._width = value; this.updateVerticalVertices(); } - + /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -231,7 +231,7 @@ this._height = value; this.updateHorizontalVertices(); } - + /** * The width of the left column @@ -245,13 +245,13 @@ set leftWidth (value) { this._leftWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; this.dirty=true; } - + /** * The width of the right column * @@ -264,13 +264,13 @@ set rightWidth(value) { this._rightWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - this._uvw * value; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; this.dirty=true; } - + /** * The height of the top row @@ -284,13 +284,13 @@ set topHeight(value) { this._topHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; this.dirty=true; } - + /** * The height of the bottom row * @@ -303,12 +303,12 @@ set bottomHeight(value) { this._bottomHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - this._uvh * value; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; this.dirty=true; } } -export default NineSlicePlane; \ No newline at end of file +export default NineSlicePlane; diff --git a/src/mesh/Plane.js b/src/mesh/Plane.js index a1d7cdc..27182f6 100644 --- a/src/mesh/Plane.js +++ b/src/mesh/Plane.js @@ -46,24 +46,23 @@ */ refresh() { - let total = this.verticesX * this.verticesY; - let verts = []; - let colors = []; - let uvs = []; - let indices = []; - let texture = this.texture; + const total = this.verticesX * this.verticesY; + const verts = []; + const colors = []; + const uvs = []; + const indices = []; + const texture = this.texture; - let segmentsX = this.verticesX - 1; - let segmentsY = this.verticesY - 1; - let i = 0; + const segmentsX = this.verticesX - 1; + const segmentsY = this.verticesY - 1; - let sizeX = texture.width / segmentsX; - let sizeY = texture.height / segmentsY; + const sizeX = texture.width / segmentsX; + const sizeY = texture.height / segmentsY; - for (i = 0; i < total; i++) { + for (let i = 0; i < total; i++) { - let x = (i % this.verticesX); - let y = ( (i / this.verticesX ) | 0 ); + const x = (i % this.verticesX); + const y = ( (i / this.verticesX ) | 0 ); verts.push((x * sizeX), @@ -77,16 +76,16 @@ let totalSub = segmentsX * segmentsY; - for (i = 0; i < totalSub; i++) { + for (let i = 0; i < totalSub; i++) { - let xpos = i % segmentsX; - let ypos = (i / segmentsX ) | 0; + const xpos = i % segmentsX; + const ypos = (i / segmentsX ) | 0; - let value = (ypos * this.verticesX) + xpos; - let value2 = (ypos * this.verticesX) + xpos + 1; - let value3 = ((ypos+1) * this.verticesX) + xpos; - let value4 = ((ypos+1) * this.verticesX) + xpos + 1; + const value = (ypos * this.verticesX) + xpos; + const value2 = (ypos * this.verticesX) + xpos + 1; + const value3 = ((ypos+1) * this.verticesX) + xpos; + const value4 = ((ypos+1) * this.verticesX) + xpos + 1; indices.push(value, value2, value3); indices.push(value2, value4, value3); diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index 2a39aa6..74e156e 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -67,7 +67,7 @@ */ refresh() { - let points = this.points; + const points = this.points; // if too little points, or texture hasn't got UVs set yet just move on. if (points.length < 1 || !this._texture._uvs) @@ -75,14 +75,14 @@ return; } - let uvs = this.uvs; + const uvs = this.uvs; - let indices = this.indices; - let colors = this.colors; + const indices = this.indices; + const colors = this.colors; - let textureUvs = this._texture._uvs; - let offset = new core.Point(textureUvs.x0, textureUvs.y0); - let factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const textureUvs = this._texture._uvs; + const offset = new core.Point(textureUvs.x0, textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; @@ -95,8 +95,8 @@ indices[0] = 0; indices[1] = 1; - let total = points.length, - index, amount; + const total = points.length; + let index, amount; for (let i = 1; i < total; i++) { diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index a83aa79..da79b08 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -107,7 +107,7 @@ _colorMatrix(matrix) { // Create a Float32 Array and normalize the offset component to 0-1 - let m = new Float32Array(matrix); + const m = new Float32Array(matrix); m[4] /= 255; m[9] /= 255; m[14] /= 255; @@ -124,7 +124,7 @@ */ brightness(b, multiply) { - let matrix = [ + const matrix = [ b, 0, 0, 0, 0, 0, b, 0, 0, 0, 0, 0, b, 0, 0, @@ -142,7 +142,7 @@ */ greyscale(scale, multiply) { - let matrix = [ + const matrix = [ scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, @@ -160,7 +160,7 @@ */ blackAndWhite(multiply) { - let matrix = [ + const matrix = [ 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, @@ -180,7 +180,7 @@ { rotation = (rotation || 0) / 180 * Math.PI; - let cosR = Math.cos(rotation), + const cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; @@ -197,22 +197,22 @@ see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - let w = 1/3, sqrW = sqrt(w);//weight is + const w = 1/3, sqrW = sqrt(w);//weight is - let a00 = cosR + (1.0 - cosR) * w; - let a01 = w * (1.0 - cosR) - sqrW * sinR; - let a02 = w * (1.0 - cosR) + sqrW * sinR; + const a00 = cosR + (1.0 - cosR) * w; + const a01 = w * (1.0 - cosR) - sqrW * sinR; + const a02 = w * (1.0 - cosR) + sqrW * sinR; - let a10 = w * (1.0 - cosR) + sqrW * sinR; - let a11 = cosR + w*(1.0 - cosR); - let a12 = w * (1.0 - cosR) - sqrW * sinR; + const a10 = w * (1.0 - cosR) + sqrW * sinR; + const a11 = cosR + w*(1.0 - cosR); + const a12 = w * (1.0 - cosR) - sqrW * sinR; - let a20 = w * (1.0 - cosR) - sqrW * sinR; - let a21 = w * (1.0 - cosR) + sqrW * sinR; - let a22 = cosR + w * (1.0 - cosR); + const a20 = w * (1.0 - cosR) - sqrW * sinR; + const a21 = w * (1.0 - cosR) + sqrW * sinR; + const a22 = cosR + w * (1.0 - cosR); - let matrix = [ + const matrix = [ a00, a01, a02, 0, 0, a10, a11, a12, 0, 0, a20, a21, a22, 0, 0, @@ -233,10 +233,10 @@ */ contrast(amount, multiply) { - let v = (amount || 0) + 1; - let o = -128 * (v - 1); + const v = (amount || 0) + 1; + const o = -128 * (v - 1); - let matrix = [ + const matrix = [ v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, @@ -255,10 +255,10 @@ */ saturate(amount, multiply) { - let x = (amount || 0) * 2 / 3 + 1; - let y = ((x - 1) * -0.5); + const x = (amount || 0) * 2 / 3 + 1; + const y = ((x - 1) * -0.5); - let matrix = [ + const matrix = [ x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, @@ -286,7 +286,7 @@ */ negative(multiply) { - let matrix = [ + const matrix = [ 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, @@ -303,7 +303,7 @@ */ sepia(multiply) { - let matrix = [ + const matrix = [ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, @@ -320,7 +320,7 @@ */ technicolor(multiply) { - let matrix = [ + const matrix = [ 1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138, @@ -337,7 +337,7 @@ */ polaroid(multiply) { - let matrix = [ + const matrix = [ 1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, @@ -354,7 +354,7 @@ */ toBGR(multiply) { - let matrix = [ + const matrix = [ 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, @@ -371,7 +371,7 @@ */ kodachrome(multiply) { - let matrix = [ + const matrix = [ 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, @@ -388,7 +388,7 @@ */ browni(multiply) { - let matrix = [ + const matrix = [ 0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283, @@ -405,7 +405,7 @@ */ vintage(multiply) { - let matrix = [ + const matrix = [ 0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123, 0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591, 0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296, @@ -432,15 +432,15 @@ lightColor = lightColor || 0xFFE580; darkColor = darkColor || 0x338000; - let lR = ((lightColor >> 16) & 0xFF) / 255; - let lG = ((lightColor >> 8) & 0xFF) / 255; - let lB = (lightColor & 0xFF) / 255; + const lR = ((lightColor >> 16) & 0xFF) / 255; + const lG = ((lightColor >> 8) & 0xFF) / 255; + const lB = (lightColor & 0xFF) / 255; - let dR = ((darkColor >> 16) & 0xFF) / 255; - let dG = ((darkColor >> 8) & 0xFF) / 255; - let dB = (darkColor & 0xFF) / 255; + const dR = ((darkColor >> 16) & 0xFF) / 255; + const dG = ((darkColor >> 8) & 0xFF) / 255; + const dB = (darkColor & 0xFF) / 255; - let matrix = [ + const matrix = [ 0.3, 0.59, 0.11, 0, 0, lR, lG, lB, desaturation, 0, dR, dG, dB, toned, 0, @@ -459,7 +459,7 @@ night(intensity, multiply) { intensity = intensity || 0.1; - let matrix = [ + const matrix = [ intensity * ( -2.0), -intensity, 0, 0, 0, -intensity, 0, intensity, 0, 0, 0, intensity, intensity * 2.0, 0, 0, @@ -480,7 +480,7 @@ */ predator(amount, multiply) { - let matrix = [ + const matrix = [ 11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount, -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount, -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount, @@ -500,7 +500,7 @@ */ lsd(multiply) { - let matrix = [ + const matrix = [ 2, -0.4, 0.5, 0, 0, -0.5, 2, -0.4, 0, 0, -0.4, -0.5, 3, 0, 0, @@ -516,7 +516,7 @@ */ reset() { - let matrix = [ + const matrix = [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, @@ -546,4 +546,4 @@ //Americanized alias ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale; -export default ColorMatrixFilter; \ No newline at end of file +export default ColorMatrixFilter; diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index d222540..862acc9 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -16,7 +16,7 @@ { constructor(sprite, scale) { - let maskMatrix = new core.Matrix(); + const maskMatrix = new core.Matrix(); sprite.renderable = false; super( @@ -45,7 +45,7 @@ apply(filterManager, input, output) { - let ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); + const ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; @@ -71,4 +71,4 @@ } } -export default DisplacementFilter; \ No newline at end of file +export default DisplacementFilter; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index eb6623e..d5c1467 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,7 @@ target: null, type: null, data: this.mouse, - stopPropagation:function(){ + stopPropagation(){ this.stopped = true; } }; @@ -324,13 +324,13 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution) + setTargetElement(element, resolution=1) { this.removeEvents(); this.interactionDOMElement = element; - this.resolution = resolution || 1; + this.resolution = resolution; this.addEvents(); } @@ -557,7 +557,7 @@ // This will allow pixi to completly ignore and bypass checking the displayObjects children. if(displayObject.interactiveChildren) { - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length-1; i >= 0; i--) { @@ -700,10 +700,10 @@ */ processMouseUp( displayObject, hit ) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; - let isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isRightButton = e.button === 2 || e.which === 3; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; if(hit) { @@ -862,14 +862,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; //TODO POOL - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -914,14 +914,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -980,14 +980,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -1026,12 +1026,7 @@ */ getTouchData(touchEvent) { - let touchData = this.interactiveDataPool.pop(); - - if(!touchData) - { - touchData = new InteractionData(); - } + const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index e32ee4c..4b034b1 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -4,9 +4,9 @@ import path from 'path'; function parse(resource, texture) { - let data = {}; - let info = resource.data.getElementsByTagName('info')[0]; - let common = resource.data.getElementsByTagName('common')[0]; + const data = {}; + const info = resource.data.getElementsByTagName('info')[0]; + const common = resource.data.getElementsByTagName('common')[0]; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); @@ -18,9 +18,9 @@ for (let i = 0; i < letters.length; i++) { - let charCode = parseInt(letters[i].getAttribute('id'), 10); + const charCode = parseInt(letters[i].getAttribute('id'), 10); - let textureRect = new core.Rectangle( + const textureRect = new core.Rectangle( parseInt(letters[i].getAttribute('x'), 10) + texture.frame.x, parseInt(letters[i].getAttribute('y'), 10) + texture.frame.y, parseInt(letters[i].getAttribute('width'), 10), @@ -38,12 +38,12 @@ } //parse kernings - let kernings = resource.data.getElementsByTagName('kerning'); + const kernings = resource.data.getElementsByTagName('kerning'); for (let i = 0; i < kernings.length; i++) { - let first = parseInt(kernings[i].getAttribute('first'), 10); - let second = parseInt(kernings[i].getAttribute('second'), 10); - let amount = parseInt(kernings[i].getAttribute('amount'), 10); + const first = parseInt(kernings[i].getAttribute('first'), 10); + const second = parseInt(kernings[i].getAttribute('second'), 10); + const amount = parseInt(kernings[i].getAttribute('amount'), 10); if(data.chars[second]) { @@ -96,12 +96,12 @@ xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } - + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { xmlUrl += '/'; } - + let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); if (core.utils.TextureCache[textureUrl]) { //reuse existing texture @@ -115,7 +115,7 @@ metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, function (res) { + this.add(resource.name + '_image', textureUrl, loadOptions, res => { parse(resource, res.texture); next(); }); diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 3fa8b7f..34a60b4 100644 --- a/src/loaders/spritesheetParser.js +++ b/src/loaders/spritesheetParser.js @@ -9,7 +9,7 @@ return function (resource, next) { let resourcePath; - let imageResourceName = resource.name + '_image'; + let imageResourceName = `${resource.name}_image`; // skip if no data, its not json, it isn't spritesheet data, or the image resource already exists if (!resource.data || !resource.isJson || !resource.data.frames || this.resources[imageResourceName]) @@ -17,7 +17,7 @@ return next(); } - let loadOptions = { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata @@ -30,7 +30,7 @@ } else { - resourcePath = path.dirname(resource.url.replace(this.baseUrl, '')) + '/' + resource.data.meta.image; + resourcePath = `${path.dirname(resource.url.replace(this.baseUrl, ''))}/${resource.data.meta.image}`; } // load the image for this sheet @@ -38,9 +38,9 @@ { resource.textures = {}; - let frames = resource.data.frames; - let frameKeys = Object.keys(frames); - let resolution = core.utils.getResolutionOfUrl(resource.url); + const frames = resource.data.frames; + const frameKeys = Object.keys(frames); + const resolution = core.utils.getResolutionOfUrl(resource.url); let batchIndex = 0; function processFrames(initialFrameIndex, maxFrames) @@ -50,14 +50,14 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { let i = frameKeys[frameIndex]; - let rect = frames[i].frame; + const rect = frames[i].frame; if (rect) { let frame = null; let trim = null; - let orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); + const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); if (frames[i].rotated) { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); @@ -101,7 +101,7 @@ } function iteration() { - processNextBatch(function() { + processNextBatch(() => { if (shouldProcessNextBatch()) { iteration(); } else { diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index f269992..0c2eff2 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -122,7 +122,7 @@ renderer.flush(); // renderer.plugins.mesh.render(this); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -172,7 +172,7 @@ glData.shader.uniforms.alpha = this.worldAlpha; glData.shader.uniforms.tint = this.tintRgb; - let drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; + const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() .draw(drawMode, this.indices.length) @@ -187,10 +187,10 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -220,16 +220,16 @@ _renderCanvasTriangleMesh(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; + const vertices = this.vertices; + const uvs = this.uvs; - let length = vertices.length / 2; + const length = vertices.length / 2; // this.count++; for (let i = 0; i < length - 2; i++) { // draw some triangles! - let index = i * 2; + const index = i * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index, (index + 2), (index + 4)); } } @@ -243,17 +243,17 @@ _renderCanvasTriangles(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; - let indices = this.indices; + const vertices = this.vertices; + const uvs = this.uvs; + const indices = this.indices; - let length = indices.length; + const length = indices.length; // this.count++; for (let i = 0; i < length; i += 3) { // draw some triangles! - let index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; + const index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2); } } @@ -271,23 +271,23 @@ */ _renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2) { - let base = this._texture.baseTexture; - let textureSource = base.source; - let textureWidth = base.width; - let textureHeight = base.height; + const base = this._texture.baseTexture; + const textureSource = base.source; + const textureWidth = base.width; + const textureHeight = base.height; let x0 = vertices[index0], x1 = vertices[index1], x2 = vertices[index2]; let y0 = vertices[index0 + 1], y1 = vertices[index1 + 1], y2 = vertices[index2 + 1]; - let u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; - let v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; + const u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; + const v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; if (this.canvasPadding > 0) { - let paddingX = this.canvasPadding / this.worldTransform.a; - let paddingY = this.canvasPadding / this.worldTransform.d; - let centerX = (x0 + x1 + x2) / 3; - let centerY = (y0 + y1 + y2) / 3; + const paddingX = this.canvasPadding / this.worldTransform.a; + const paddingY = this.canvasPadding / this.worldTransform.d; + const centerX = (x0 + x1 + x2) / 3; + const centerY = (y0 + y1 + y2) / 3; let normX = x0 - centerX; let normY = y0 - centerY; @@ -326,13 +326,13 @@ context.clip(); // Compute matrix transform - let delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); - let deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); - let deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); - let deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); - let deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); - let deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); - let deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); + const delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); + const deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); + const deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); + const deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); + const deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); + const deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); + const deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); context.transform(deltaA / delta, deltaD / delta, deltaB / delta, deltaE / delta, @@ -352,20 +352,20 @@ */ renderMeshFlat(Mesh) { - let context = this.context; - let vertices = Mesh.vertices; + const context = this.context; + const vertices = Mesh.vertices; - let length = vertices.length/2; + const length = vertices.length/2; // this.count++; context.beginPath(); for (let i=1; i < length-2; i++) { // draw some triangles! - let index = i*2; + const index = i*2; - let x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; - let y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; + const x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; + const y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; context.moveTo(x0, y0); context.lineTo(x1, y1); diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index df10640..b179b10 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -5,7 +5,7 @@ /** * The NineSlicePlane allows you to stretch a texture using 9-slice scaling. The corners will remain unscaled (useful * for buttons with rounded corners for example) and the other areas will be scaled horizontally and or vertically - * + * *```js * let Plane9 = new PIXI.NineSlicePlane(PIXI.Texture.fromImage('BoxWithRoundedCorners.png'), 15, 15, 15, 15); * ``` @@ -44,7 +44,7 @@ { super(texture, 4, 4); - let uvs = this.uvs; + const uvs = this.uvs; // right and bottom uv's are always 1 uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; @@ -102,14 +102,14 @@ } updateHorizontalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[9] = vertices[11] = vertices[13] = vertices[15] = this._topHeight; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - this._bottomHeight; vertices[25] = vertices[27] = vertices[29] = vertices[31] = this._height; } updateVerticalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[2] = vertices[10] = vertices[18] = vertices[26] = this._leftWidth; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - this._rightWidth; vertices[6] = vertices[14] = vertices[22] = vertices[30] = this._width ; @@ -123,11 +123,11 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; context.globalAlpha = this.worldAlpha; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -137,12 +137,12 @@ { context.setTransform(transform.a * res, transform.b * res, transform.c * res, transform.d * res, transform.tx * res, transform.ty * res); } - - let base = this._texture.baseTexture; - let textureSource = base.source; - let w = base.width; - let h = base.height; - + + const base = this._texture.baseTexture; + const textureSource = base.source; + const w = base.width; + const h = base.height; + this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); this.drawSegment(context, textureSource, w, h, 4, 5, 14, 15); @@ -163,8 +163,8 @@ * @param textureSource * @param w width of the texture * @param h height of the texture - * @param x1 - * @param y1 + * @param x1 + * @param y1 * @param x2 * @param y2 * @private @@ -172,14 +172,14 @@ drawSegment(context, textureSource, w, h, x1, y1, x2, y2) { // otherwise you get weird results when using slices of that are 0 wide or high. - let uvs = this.uvs; - let vertices = this.vertices; - + const uvs = this.uvs; + const vertices = this.vertices; + let sw = (uvs[x2]-uvs[x1]) * w; let sh = (uvs[y2]-uvs[y1]) * h; let dw = vertices[x2] - vertices[x1]; let dh = vertices[y2] - vertices[y1]; - + // make sure the source is at least 1 pixel wide and high, otherwise nothing will be drawn. if (sw<1) { sw=1; @@ -213,7 +213,7 @@ this._width = value; this.updateVerticalVertices(); } - + /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -231,7 +231,7 @@ this._height = value; this.updateHorizontalVertices(); } - + /** * The width of the left column @@ -245,13 +245,13 @@ set leftWidth (value) { this._leftWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; this.dirty=true; } - + /** * The width of the right column * @@ -264,13 +264,13 @@ set rightWidth(value) { this._rightWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - this._uvw * value; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; this.dirty=true; } - + /** * The height of the top row @@ -284,13 +284,13 @@ set topHeight(value) { this._topHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; this.dirty=true; } - + /** * The height of the bottom row * @@ -303,12 +303,12 @@ set bottomHeight(value) { this._bottomHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - this._uvh * value; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; this.dirty=true; } } -export default NineSlicePlane; \ No newline at end of file +export default NineSlicePlane; diff --git a/src/mesh/Plane.js b/src/mesh/Plane.js index a1d7cdc..27182f6 100644 --- a/src/mesh/Plane.js +++ b/src/mesh/Plane.js @@ -46,24 +46,23 @@ */ refresh() { - let total = this.verticesX * this.verticesY; - let verts = []; - let colors = []; - let uvs = []; - let indices = []; - let texture = this.texture; + const total = this.verticesX * this.verticesY; + const verts = []; + const colors = []; + const uvs = []; + const indices = []; + const texture = this.texture; - let segmentsX = this.verticesX - 1; - let segmentsY = this.verticesY - 1; - let i = 0; + const segmentsX = this.verticesX - 1; + const segmentsY = this.verticesY - 1; - let sizeX = texture.width / segmentsX; - let sizeY = texture.height / segmentsY; + const sizeX = texture.width / segmentsX; + const sizeY = texture.height / segmentsY; - for (i = 0; i < total; i++) { + for (let i = 0; i < total; i++) { - let x = (i % this.verticesX); - let y = ( (i / this.verticesX ) | 0 ); + const x = (i % this.verticesX); + const y = ( (i / this.verticesX ) | 0 ); verts.push((x * sizeX), @@ -77,16 +76,16 @@ let totalSub = segmentsX * segmentsY; - for (i = 0; i < totalSub; i++) { + for (let i = 0; i < totalSub; i++) { - let xpos = i % segmentsX; - let ypos = (i / segmentsX ) | 0; + const xpos = i % segmentsX; + const ypos = (i / segmentsX ) | 0; - let value = (ypos * this.verticesX) + xpos; - let value2 = (ypos * this.verticesX) + xpos + 1; - let value3 = ((ypos+1) * this.verticesX) + xpos; - let value4 = ((ypos+1) * this.verticesX) + xpos + 1; + const value = (ypos * this.verticesX) + xpos; + const value2 = (ypos * this.verticesX) + xpos + 1; + const value3 = ((ypos+1) * this.verticesX) + xpos; + const value4 = ((ypos+1) * this.verticesX) + xpos + 1; indices.push(value, value2, value3); indices.push(value2, value4, value3); diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index 2a39aa6..74e156e 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -67,7 +67,7 @@ */ refresh() { - let points = this.points; + const points = this.points; // if too little points, or texture hasn't got UVs set yet just move on. if (points.length < 1 || !this._texture._uvs) @@ -75,14 +75,14 @@ return; } - let uvs = this.uvs; + const uvs = this.uvs; - let indices = this.indices; - let colors = this.colors; + const indices = this.indices; + const colors = this.colors; - let textureUvs = this._texture._uvs; - let offset = new core.Point(textureUvs.x0, textureUvs.y0); - let factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const textureUvs = this._texture._uvs; + const offset = new core.Point(textureUvs.x0, textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; @@ -95,8 +95,8 @@ indices[0] = 0; indices[1] = 1; - let total = points.length, - index, amount; + const total = points.length; + let index, amount; for (let i = 1; i < total; i++) { diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 5161e02..eec70a6 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -44,7 +44,7 @@ // Making sure the batch size is valid // 65535 is max vertex index in the index buffer (see ParticleRenderer) // so max number of particles is 65536 / 4 = 16384 - let maxBatchSize = 16384; + const maxBatchSize = 16384; if (batchSize > maxBatchSize) { batchSize = maxBatchSize; } @@ -161,9 +161,7 @@ this.baseTexture = this.children[0]._texture.baseTexture; if(!this.baseTexture.hasLoaded) { - this.baseTexture.once('update', function(){ - this.onChildrenChange(0); - }, this); + this.baseTexture.once('update', () => this.onChildrenChange(0)); } } @@ -179,7 +177,7 @@ */ onChildrenChange(smallestChildIndex) { - let bufferIndex = Math.floor(smallestChildIndex / this._batchSize); + const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); if (bufferIndex < this._bufferToUpdate) { this._bufferToUpdate = bufferIndex; } @@ -198,8 +196,8 @@ return; } - let context = renderer.context; - let transform = this.worldTransform; + const context = renderer.context; + const transform = this.worldTransform; let isRotated = true; let positionX = 0; @@ -208,7 +206,7 @@ let finalWidth = 0; let finalHeight = 0; - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -220,14 +218,14 @@ for (let i = 0; i < this.children.length; ++i) { - let child = this.children[i]; + const child = this.children[i]; if (!child.visible) { continue; } - let frame = child.texture.frame; + const frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -264,7 +262,7 @@ child.displayObjectUpdateTransform(); - let childTransform = child.worldTransform; + const childTransform = child.worldTransform; if (renderer.roundPixels) { @@ -296,7 +294,7 @@ finalHeight = frame.height; } - let resolution = child.texture.baseTexture.resolution; + const resolution = child.texture.baseTexture.resolution; context.drawImage( child.texture.baseTexture.source, diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index a83aa79..da79b08 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -107,7 +107,7 @@ _colorMatrix(matrix) { // Create a Float32 Array and normalize the offset component to 0-1 - let m = new Float32Array(matrix); + const m = new Float32Array(matrix); m[4] /= 255; m[9] /= 255; m[14] /= 255; @@ -124,7 +124,7 @@ */ brightness(b, multiply) { - let matrix = [ + const matrix = [ b, 0, 0, 0, 0, 0, b, 0, 0, 0, 0, 0, b, 0, 0, @@ -142,7 +142,7 @@ */ greyscale(scale, multiply) { - let matrix = [ + const matrix = [ scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, @@ -160,7 +160,7 @@ */ blackAndWhite(multiply) { - let matrix = [ + const matrix = [ 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, @@ -180,7 +180,7 @@ { rotation = (rotation || 0) / 180 * Math.PI; - let cosR = Math.cos(rotation), + const cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; @@ -197,22 +197,22 @@ see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - let w = 1/3, sqrW = sqrt(w);//weight is + const w = 1/3, sqrW = sqrt(w);//weight is - let a00 = cosR + (1.0 - cosR) * w; - let a01 = w * (1.0 - cosR) - sqrW * sinR; - let a02 = w * (1.0 - cosR) + sqrW * sinR; + const a00 = cosR + (1.0 - cosR) * w; + const a01 = w * (1.0 - cosR) - sqrW * sinR; + const a02 = w * (1.0 - cosR) + sqrW * sinR; - let a10 = w * (1.0 - cosR) + sqrW * sinR; - let a11 = cosR + w*(1.0 - cosR); - let a12 = w * (1.0 - cosR) - sqrW * sinR; + const a10 = w * (1.0 - cosR) + sqrW * sinR; + const a11 = cosR + w*(1.0 - cosR); + const a12 = w * (1.0 - cosR) - sqrW * sinR; - let a20 = w * (1.0 - cosR) - sqrW * sinR; - let a21 = w * (1.0 - cosR) + sqrW * sinR; - let a22 = cosR + w * (1.0 - cosR); + const a20 = w * (1.0 - cosR) - sqrW * sinR; + const a21 = w * (1.0 - cosR) + sqrW * sinR; + const a22 = cosR + w * (1.0 - cosR); - let matrix = [ + const matrix = [ a00, a01, a02, 0, 0, a10, a11, a12, 0, 0, a20, a21, a22, 0, 0, @@ -233,10 +233,10 @@ */ contrast(amount, multiply) { - let v = (amount || 0) + 1; - let o = -128 * (v - 1); + const v = (amount || 0) + 1; + const o = -128 * (v - 1); - let matrix = [ + const matrix = [ v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, @@ -255,10 +255,10 @@ */ saturate(amount, multiply) { - let x = (amount || 0) * 2 / 3 + 1; - let y = ((x - 1) * -0.5); + const x = (amount || 0) * 2 / 3 + 1; + const y = ((x - 1) * -0.5); - let matrix = [ + const matrix = [ x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, @@ -286,7 +286,7 @@ */ negative(multiply) { - let matrix = [ + const matrix = [ 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, @@ -303,7 +303,7 @@ */ sepia(multiply) { - let matrix = [ + const matrix = [ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, @@ -320,7 +320,7 @@ */ technicolor(multiply) { - let matrix = [ + const matrix = [ 1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138, @@ -337,7 +337,7 @@ */ polaroid(multiply) { - let matrix = [ + const matrix = [ 1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, @@ -354,7 +354,7 @@ */ toBGR(multiply) { - let matrix = [ + const matrix = [ 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, @@ -371,7 +371,7 @@ */ kodachrome(multiply) { - let matrix = [ + const matrix = [ 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, @@ -388,7 +388,7 @@ */ browni(multiply) { - let matrix = [ + const matrix = [ 0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283, @@ -405,7 +405,7 @@ */ vintage(multiply) { - let matrix = [ + const matrix = [ 0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123, 0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591, 0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296, @@ -432,15 +432,15 @@ lightColor = lightColor || 0xFFE580; darkColor = darkColor || 0x338000; - let lR = ((lightColor >> 16) & 0xFF) / 255; - let lG = ((lightColor >> 8) & 0xFF) / 255; - let lB = (lightColor & 0xFF) / 255; + const lR = ((lightColor >> 16) & 0xFF) / 255; + const lG = ((lightColor >> 8) & 0xFF) / 255; + const lB = (lightColor & 0xFF) / 255; - let dR = ((darkColor >> 16) & 0xFF) / 255; - let dG = ((darkColor >> 8) & 0xFF) / 255; - let dB = (darkColor & 0xFF) / 255; + const dR = ((darkColor >> 16) & 0xFF) / 255; + const dG = ((darkColor >> 8) & 0xFF) / 255; + const dB = (darkColor & 0xFF) / 255; - let matrix = [ + const matrix = [ 0.3, 0.59, 0.11, 0, 0, lR, lG, lB, desaturation, 0, dR, dG, dB, toned, 0, @@ -459,7 +459,7 @@ night(intensity, multiply) { intensity = intensity || 0.1; - let matrix = [ + const matrix = [ intensity * ( -2.0), -intensity, 0, 0, 0, -intensity, 0, intensity, 0, 0, 0, intensity, intensity * 2.0, 0, 0, @@ -480,7 +480,7 @@ */ predator(amount, multiply) { - let matrix = [ + const matrix = [ 11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount, -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount, -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount, @@ -500,7 +500,7 @@ */ lsd(multiply) { - let matrix = [ + const matrix = [ 2, -0.4, 0.5, 0, 0, -0.5, 2, -0.4, 0, 0, -0.4, -0.5, 3, 0, 0, @@ -516,7 +516,7 @@ */ reset() { - let matrix = [ + const matrix = [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, @@ -546,4 +546,4 @@ //Americanized alias ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale; -export default ColorMatrixFilter; \ No newline at end of file +export default ColorMatrixFilter; diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index d222540..862acc9 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -16,7 +16,7 @@ { constructor(sprite, scale) { - let maskMatrix = new core.Matrix(); + const maskMatrix = new core.Matrix(); sprite.renderable = false; super( @@ -45,7 +45,7 @@ apply(filterManager, input, output) { - let ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); + const ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; @@ -71,4 +71,4 @@ } } -export default DisplacementFilter; \ No newline at end of file +export default DisplacementFilter; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index eb6623e..d5c1467 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,7 @@ target: null, type: null, data: this.mouse, - stopPropagation:function(){ + stopPropagation(){ this.stopped = true; } }; @@ -324,13 +324,13 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution) + setTargetElement(element, resolution=1) { this.removeEvents(); this.interactionDOMElement = element; - this.resolution = resolution || 1; + this.resolution = resolution; this.addEvents(); } @@ -557,7 +557,7 @@ // This will allow pixi to completly ignore and bypass checking the displayObjects children. if(displayObject.interactiveChildren) { - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length-1; i >= 0; i--) { @@ -700,10 +700,10 @@ */ processMouseUp( displayObject, hit ) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; - let isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isRightButton = e.button === 2 || e.which === 3; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; if(hit) { @@ -862,14 +862,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; //TODO POOL - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -914,14 +914,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -980,14 +980,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -1026,12 +1026,7 @@ */ getTouchData(touchEvent) { - let touchData = this.interactiveDataPool.pop(); - - if(!touchData) - { - touchData = new InteractionData(); - } + const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index e32ee4c..4b034b1 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -4,9 +4,9 @@ import path from 'path'; function parse(resource, texture) { - let data = {}; - let info = resource.data.getElementsByTagName('info')[0]; - let common = resource.data.getElementsByTagName('common')[0]; + const data = {}; + const info = resource.data.getElementsByTagName('info')[0]; + const common = resource.data.getElementsByTagName('common')[0]; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); @@ -18,9 +18,9 @@ for (let i = 0; i < letters.length; i++) { - let charCode = parseInt(letters[i].getAttribute('id'), 10); + const charCode = parseInt(letters[i].getAttribute('id'), 10); - let textureRect = new core.Rectangle( + const textureRect = new core.Rectangle( parseInt(letters[i].getAttribute('x'), 10) + texture.frame.x, parseInt(letters[i].getAttribute('y'), 10) + texture.frame.y, parseInt(letters[i].getAttribute('width'), 10), @@ -38,12 +38,12 @@ } //parse kernings - let kernings = resource.data.getElementsByTagName('kerning'); + const kernings = resource.data.getElementsByTagName('kerning'); for (let i = 0; i < kernings.length; i++) { - let first = parseInt(kernings[i].getAttribute('first'), 10); - let second = parseInt(kernings[i].getAttribute('second'), 10); - let amount = parseInt(kernings[i].getAttribute('amount'), 10); + const first = parseInt(kernings[i].getAttribute('first'), 10); + const second = parseInt(kernings[i].getAttribute('second'), 10); + const amount = parseInt(kernings[i].getAttribute('amount'), 10); if(data.chars[second]) { @@ -96,12 +96,12 @@ xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } - + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { xmlUrl += '/'; } - + let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); if (core.utils.TextureCache[textureUrl]) { //reuse existing texture @@ -115,7 +115,7 @@ metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, function (res) { + this.add(resource.name + '_image', textureUrl, loadOptions, res => { parse(resource, res.texture); next(); }); diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 3fa8b7f..34a60b4 100644 --- a/src/loaders/spritesheetParser.js +++ b/src/loaders/spritesheetParser.js @@ -9,7 +9,7 @@ return function (resource, next) { let resourcePath; - let imageResourceName = resource.name + '_image'; + let imageResourceName = `${resource.name}_image`; // skip if no data, its not json, it isn't spritesheet data, or the image resource already exists if (!resource.data || !resource.isJson || !resource.data.frames || this.resources[imageResourceName]) @@ -17,7 +17,7 @@ return next(); } - let loadOptions = { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata @@ -30,7 +30,7 @@ } else { - resourcePath = path.dirname(resource.url.replace(this.baseUrl, '')) + '/' + resource.data.meta.image; + resourcePath = `${path.dirname(resource.url.replace(this.baseUrl, ''))}/${resource.data.meta.image}`; } // load the image for this sheet @@ -38,9 +38,9 @@ { resource.textures = {}; - let frames = resource.data.frames; - let frameKeys = Object.keys(frames); - let resolution = core.utils.getResolutionOfUrl(resource.url); + const frames = resource.data.frames; + const frameKeys = Object.keys(frames); + const resolution = core.utils.getResolutionOfUrl(resource.url); let batchIndex = 0; function processFrames(initialFrameIndex, maxFrames) @@ -50,14 +50,14 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { let i = frameKeys[frameIndex]; - let rect = frames[i].frame; + const rect = frames[i].frame; if (rect) { let frame = null; let trim = null; - let orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); + const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); if (frames[i].rotated) { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); @@ -101,7 +101,7 @@ } function iteration() { - processNextBatch(function() { + processNextBatch(() => { if (shouldProcessNextBatch()) { iteration(); } else { diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index f269992..0c2eff2 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -122,7 +122,7 @@ renderer.flush(); // renderer.plugins.mesh.render(this); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -172,7 +172,7 @@ glData.shader.uniforms.alpha = this.worldAlpha; glData.shader.uniforms.tint = this.tintRgb; - let drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; + const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() .draw(drawMode, this.indices.length) @@ -187,10 +187,10 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -220,16 +220,16 @@ _renderCanvasTriangleMesh(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; + const vertices = this.vertices; + const uvs = this.uvs; - let length = vertices.length / 2; + const length = vertices.length / 2; // this.count++; for (let i = 0; i < length - 2; i++) { // draw some triangles! - let index = i * 2; + const index = i * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index, (index + 2), (index + 4)); } } @@ -243,17 +243,17 @@ _renderCanvasTriangles(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; - let indices = this.indices; + const vertices = this.vertices; + const uvs = this.uvs; + const indices = this.indices; - let length = indices.length; + const length = indices.length; // this.count++; for (let i = 0; i < length; i += 3) { // draw some triangles! - let index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; + const index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2); } } @@ -271,23 +271,23 @@ */ _renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2) { - let base = this._texture.baseTexture; - let textureSource = base.source; - let textureWidth = base.width; - let textureHeight = base.height; + const base = this._texture.baseTexture; + const textureSource = base.source; + const textureWidth = base.width; + const textureHeight = base.height; let x0 = vertices[index0], x1 = vertices[index1], x2 = vertices[index2]; let y0 = vertices[index0 + 1], y1 = vertices[index1 + 1], y2 = vertices[index2 + 1]; - let u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; - let v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; + const u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; + const v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; if (this.canvasPadding > 0) { - let paddingX = this.canvasPadding / this.worldTransform.a; - let paddingY = this.canvasPadding / this.worldTransform.d; - let centerX = (x0 + x1 + x2) / 3; - let centerY = (y0 + y1 + y2) / 3; + const paddingX = this.canvasPadding / this.worldTransform.a; + const paddingY = this.canvasPadding / this.worldTransform.d; + const centerX = (x0 + x1 + x2) / 3; + const centerY = (y0 + y1 + y2) / 3; let normX = x0 - centerX; let normY = y0 - centerY; @@ -326,13 +326,13 @@ context.clip(); // Compute matrix transform - let delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); - let deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); - let deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); - let deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); - let deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); - let deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); - let deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); + const delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); + const deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); + const deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); + const deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); + const deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); + const deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); + const deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); context.transform(deltaA / delta, deltaD / delta, deltaB / delta, deltaE / delta, @@ -352,20 +352,20 @@ */ renderMeshFlat(Mesh) { - let context = this.context; - let vertices = Mesh.vertices; + const context = this.context; + const vertices = Mesh.vertices; - let length = vertices.length/2; + const length = vertices.length/2; // this.count++; context.beginPath(); for (let i=1; i < length-2; i++) { // draw some triangles! - let index = i*2; + const index = i*2; - let x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; - let y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; + const x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; + const y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; context.moveTo(x0, y0); context.lineTo(x1, y1); diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index df10640..b179b10 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -5,7 +5,7 @@ /** * The NineSlicePlane allows you to stretch a texture using 9-slice scaling. The corners will remain unscaled (useful * for buttons with rounded corners for example) and the other areas will be scaled horizontally and or vertically - * + * *```js * let Plane9 = new PIXI.NineSlicePlane(PIXI.Texture.fromImage('BoxWithRoundedCorners.png'), 15, 15, 15, 15); * ``` @@ -44,7 +44,7 @@ { super(texture, 4, 4); - let uvs = this.uvs; + const uvs = this.uvs; // right and bottom uv's are always 1 uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; @@ -102,14 +102,14 @@ } updateHorizontalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[9] = vertices[11] = vertices[13] = vertices[15] = this._topHeight; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - this._bottomHeight; vertices[25] = vertices[27] = vertices[29] = vertices[31] = this._height; } updateVerticalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[2] = vertices[10] = vertices[18] = vertices[26] = this._leftWidth; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - this._rightWidth; vertices[6] = vertices[14] = vertices[22] = vertices[30] = this._width ; @@ -123,11 +123,11 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; context.globalAlpha = this.worldAlpha; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -137,12 +137,12 @@ { context.setTransform(transform.a * res, transform.b * res, transform.c * res, transform.d * res, transform.tx * res, transform.ty * res); } - - let base = this._texture.baseTexture; - let textureSource = base.source; - let w = base.width; - let h = base.height; - + + const base = this._texture.baseTexture; + const textureSource = base.source; + const w = base.width; + const h = base.height; + this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); this.drawSegment(context, textureSource, w, h, 4, 5, 14, 15); @@ -163,8 +163,8 @@ * @param textureSource * @param w width of the texture * @param h height of the texture - * @param x1 - * @param y1 + * @param x1 + * @param y1 * @param x2 * @param y2 * @private @@ -172,14 +172,14 @@ drawSegment(context, textureSource, w, h, x1, y1, x2, y2) { // otherwise you get weird results when using slices of that are 0 wide or high. - let uvs = this.uvs; - let vertices = this.vertices; - + const uvs = this.uvs; + const vertices = this.vertices; + let sw = (uvs[x2]-uvs[x1]) * w; let sh = (uvs[y2]-uvs[y1]) * h; let dw = vertices[x2] - vertices[x1]; let dh = vertices[y2] - vertices[y1]; - + // make sure the source is at least 1 pixel wide and high, otherwise nothing will be drawn. if (sw<1) { sw=1; @@ -213,7 +213,7 @@ this._width = value; this.updateVerticalVertices(); } - + /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -231,7 +231,7 @@ this._height = value; this.updateHorizontalVertices(); } - + /** * The width of the left column @@ -245,13 +245,13 @@ set leftWidth (value) { this._leftWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; this.dirty=true; } - + /** * The width of the right column * @@ -264,13 +264,13 @@ set rightWidth(value) { this._rightWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - this._uvw * value; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; this.dirty=true; } - + /** * The height of the top row @@ -284,13 +284,13 @@ set topHeight(value) { this._topHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; this.dirty=true; } - + /** * The height of the bottom row * @@ -303,12 +303,12 @@ set bottomHeight(value) { this._bottomHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - this._uvh * value; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; this.dirty=true; } } -export default NineSlicePlane; \ No newline at end of file +export default NineSlicePlane; diff --git a/src/mesh/Plane.js b/src/mesh/Plane.js index a1d7cdc..27182f6 100644 --- a/src/mesh/Plane.js +++ b/src/mesh/Plane.js @@ -46,24 +46,23 @@ */ refresh() { - let total = this.verticesX * this.verticesY; - let verts = []; - let colors = []; - let uvs = []; - let indices = []; - let texture = this.texture; + const total = this.verticesX * this.verticesY; + const verts = []; + const colors = []; + const uvs = []; + const indices = []; + const texture = this.texture; - let segmentsX = this.verticesX - 1; - let segmentsY = this.verticesY - 1; - let i = 0; + const segmentsX = this.verticesX - 1; + const segmentsY = this.verticesY - 1; - let sizeX = texture.width / segmentsX; - let sizeY = texture.height / segmentsY; + const sizeX = texture.width / segmentsX; + const sizeY = texture.height / segmentsY; - for (i = 0; i < total; i++) { + for (let i = 0; i < total; i++) { - let x = (i % this.verticesX); - let y = ( (i / this.verticesX ) | 0 ); + const x = (i % this.verticesX); + const y = ( (i / this.verticesX ) | 0 ); verts.push((x * sizeX), @@ -77,16 +76,16 @@ let totalSub = segmentsX * segmentsY; - for (i = 0; i < totalSub; i++) { + for (let i = 0; i < totalSub; i++) { - let xpos = i % segmentsX; - let ypos = (i / segmentsX ) | 0; + const xpos = i % segmentsX; + const ypos = (i / segmentsX ) | 0; - let value = (ypos * this.verticesX) + xpos; - let value2 = (ypos * this.verticesX) + xpos + 1; - let value3 = ((ypos+1) * this.verticesX) + xpos; - let value4 = ((ypos+1) * this.verticesX) + xpos + 1; + const value = (ypos * this.verticesX) + xpos; + const value2 = (ypos * this.verticesX) + xpos + 1; + const value3 = ((ypos+1) * this.verticesX) + xpos; + const value4 = ((ypos+1) * this.verticesX) + xpos + 1; indices.push(value, value2, value3); indices.push(value2, value4, value3); diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index 2a39aa6..74e156e 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -67,7 +67,7 @@ */ refresh() { - let points = this.points; + const points = this.points; // if too little points, or texture hasn't got UVs set yet just move on. if (points.length < 1 || !this._texture._uvs) @@ -75,14 +75,14 @@ return; } - let uvs = this.uvs; + const uvs = this.uvs; - let indices = this.indices; - let colors = this.colors; + const indices = this.indices; + const colors = this.colors; - let textureUvs = this._texture._uvs; - let offset = new core.Point(textureUvs.x0, textureUvs.y0); - let factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const textureUvs = this._texture._uvs; + const offset = new core.Point(textureUvs.x0, textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; @@ -95,8 +95,8 @@ indices[0] = 0; indices[1] = 1; - let total = points.length, - index, amount; + const total = points.length; + let index, amount; for (let i = 1; i < total; i++) { diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 5161e02..eec70a6 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -44,7 +44,7 @@ // Making sure the batch size is valid // 65535 is max vertex index in the index buffer (see ParticleRenderer) // so max number of particles is 65536 / 4 = 16384 - let maxBatchSize = 16384; + const maxBatchSize = 16384; if (batchSize > maxBatchSize) { batchSize = maxBatchSize; } @@ -161,9 +161,7 @@ this.baseTexture = this.children[0]._texture.baseTexture; if(!this.baseTexture.hasLoaded) { - this.baseTexture.once('update', function(){ - this.onChildrenChange(0); - }, this); + this.baseTexture.once('update', () => this.onChildrenChange(0)); } } @@ -179,7 +177,7 @@ */ onChildrenChange(smallestChildIndex) { - let bufferIndex = Math.floor(smallestChildIndex / this._batchSize); + const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); if (bufferIndex < this._bufferToUpdate) { this._bufferToUpdate = bufferIndex; } @@ -198,8 +196,8 @@ return; } - let context = renderer.context; - let transform = this.worldTransform; + const context = renderer.context; + const transform = this.worldTransform; let isRotated = true; let positionX = 0; @@ -208,7 +206,7 @@ let finalWidth = 0; let finalHeight = 0; - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -220,14 +218,14 @@ for (let i = 0; i < this.children.length; ++i) { - let child = this.children[i]; + const child = this.children[i]; if (!child.visible) { continue; } - let frame = child.texture.frame; + const frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -264,7 +262,7 @@ child.displayObjectUpdateTransform(); - let childTransform = child.worldTransform; + const childTransform = child.worldTransform; if (renderer.roundPixels) { @@ -296,7 +294,7 @@ finalHeight = frame.height; } - let resolution = child.texture.baseTexture.resolution; + const resolution = child.texture.baseTexture.resolution; context.drawImage( child.texture.baseTexture.source, diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 6808183..2c5a7e5 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -71,7 +71,7 @@ // Make copy of properties object so that when we edit the offset it doesn't // change all other instances of the object literal - property = + property = { attribute:property.attribute, size:property.size, @@ -108,12 +108,9 @@ */ initBuffers() { - let gl = this.gl; - let i; - let property; - + const gl = this.gl; let dynamicOffset = 0; - + let property; /** * Holds the indices of the geometry (quads) to draw @@ -126,7 +123,7 @@ this.dynamicStride = 0; - for (i = 0; i < this.dynamicProperties.length; i++) + for (let i = 0; i < this.dynamicProperties.length; i++) { property = this.dynamicProperties[i]; @@ -142,7 +139,7 @@ let staticOffset = 0; this.staticStride = 0; - for (i = 0; i < this.staticProperties.length; i++) + for (let i = 0; i < this.staticProperties.length; i++) { property = this.staticProperties[i]; @@ -160,13 +157,13 @@ this.vao = new glCore.VertexArrayObject(gl) .addIndex(this.indexBuffer); - for (i = 0; i < this.dynamicProperties.length; i++) + for (let i = 0; i < this.dynamicProperties.length; i++) { property = this.dynamicProperties[i]; this.vao.addAttribute(this.dynamicBuffer, property.attribute, gl.FLOAT, false, this.dynamicStride * 4, property.offset * 4); } - for (i = 0; i < this.staticProperties.length; i++) + for (let i = 0; i < this.staticProperties.length; i++) { property = this.staticProperties[i]; this.vao.addAttribute(this.staticBuffer, property.attribute, gl.FLOAT, false, this.staticStride * 4, property.offset * 4); diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index a83aa79..da79b08 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -107,7 +107,7 @@ _colorMatrix(matrix) { // Create a Float32 Array and normalize the offset component to 0-1 - let m = new Float32Array(matrix); + const m = new Float32Array(matrix); m[4] /= 255; m[9] /= 255; m[14] /= 255; @@ -124,7 +124,7 @@ */ brightness(b, multiply) { - let matrix = [ + const matrix = [ b, 0, 0, 0, 0, 0, b, 0, 0, 0, 0, 0, b, 0, 0, @@ -142,7 +142,7 @@ */ greyscale(scale, multiply) { - let matrix = [ + const matrix = [ scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, @@ -160,7 +160,7 @@ */ blackAndWhite(multiply) { - let matrix = [ + const matrix = [ 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, @@ -180,7 +180,7 @@ { rotation = (rotation || 0) / 180 * Math.PI; - let cosR = Math.cos(rotation), + const cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; @@ -197,22 +197,22 @@ see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - let w = 1/3, sqrW = sqrt(w);//weight is + const w = 1/3, sqrW = sqrt(w);//weight is - let a00 = cosR + (1.0 - cosR) * w; - let a01 = w * (1.0 - cosR) - sqrW * sinR; - let a02 = w * (1.0 - cosR) + sqrW * sinR; + const a00 = cosR + (1.0 - cosR) * w; + const a01 = w * (1.0 - cosR) - sqrW * sinR; + const a02 = w * (1.0 - cosR) + sqrW * sinR; - let a10 = w * (1.0 - cosR) + sqrW * sinR; - let a11 = cosR + w*(1.0 - cosR); - let a12 = w * (1.0 - cosR) - sqrW * sinR; + const a10 = w * (1.0 - cosR) + sqrW * sinR; + const a11 = cosR + w*(1.0 - cosR); + const a12 = w * (1.0 - cosR) - sqrW * sinR; - let a20 = w * (1.0 - cosR) - sqrW * sinR; - let a21 = w * (1.0 - cosR) + sqrW * sinR; - let a22 = cosR + w * (1.0 - cosR); + const a20 = w * (1.0 - cosR) - sqrW * sinR; + const a21 = w * (1.0 - cosR) + sqrW * sinR; + const a22 = cosR + w * (1.0 - cosR); - let matrix = [ + const matrix = [ a00, a01, a02, 0, 0, a10, a11, a12, 0, 0, a20, a21, a22, 0, 0, @@ -233,10 +233,10 @@ */ contrast(amount, multiply) { - let v = (amount || 0) + 1; - let o = -128 * (v - 1); + const v = (amount || 0) + 1; + const o = -128 * (v - 1); - let matrix = [ + const matrix = [ v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, @@ -255,10 +255,10 @@ */ saturate(amount, multiply) { - let x = (amount || 0) * 2 / 3 + 1; - let y = ((x - 1) * -0.5); + const x = (amount || 0) * 2 / 3 + 1; + const y = ((x - 1) * -0.5); - let matrix = [ + const matrix = [ x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, @@ -286,7 +286,7 @@ */ negative(multiply) { - let matrix = [ + const matrix = [ 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, @@ -303,7 +303,7 @@ */ sepia(multiply) { - let matrix = [ + const matrix = [ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, @@ -320,7 +320,7 @@ */ technicolor(multiply) { - let matrix = [ + const matrix = [ 1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138, @@ -337,7 +337,7 @@ */ polaroid(multiply) { - let matrix = [ + const matrix = [ 1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, @@ -354,7 +354,7 @@ */ toBGR(multiply) { - let matrix = [ + const matrix = [ 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, @@ -371,7 +371,7 @@ */ kodachrome(multiply) { - let matrix = [ + const matrix = [ 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, @@ -388,7 +388,7 @@ */ browni(multiply) { - let matrix = [ + const matrix = [ 0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283, @@ -405,7 +405,7 @@ */ vintage(multiply) { - let matrix = [ + const matrix = [ 0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123, 0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591, 0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296, @@ -432,15 +432,15 @@ lightColor = lightColor || 0xFFE580; darkColor = darkColor || 0x338000; - let lR = ((lightColor >> 16) & 0xFF) / 255; - let lG = ((lightColor >> 8) & 0xFF) / 255; - let lB = (lightColor & 0xFF) / 255; + const lR = ((lightColor >> 16) & 0xFF) / 255; + const lG = ((lightColor >> 8) & 0xFF) / 255; + const lB = (lightColor & 0xFF) / 255; - let dR = ((darkColor >> 16) & 0xFF) / 255; - let dG = ((darkColor >> 8) & 0xFF) / 255; - let dB = (darkColor & 0xFF) / 255; + const dR = ((darkColor >> 16) & 0xFF) / 255; + const dG = ((darkColor >> 8) & 0xFF) / 255; + const dB = (darkColor & 0xFF) / 255; - let matrix = [ + const matrix = [ 0.3, 0.59, 0.11, 0, 0, lR, lG, lB, desaturation, 0, dR, dG, dB, toned, 0, @@ -459,7 +459,7 @@ night(intensity, multiply) { intensity = intensity || 0.1; - let matrix = [ + const matrix = [ intensity * ( -2.0), -intensity, 0, 0, 0, -intensity, 0, intensity, 0, 0, 0, intensity, intensity * 2.0, 0, 0, @@ -480,7 +480,7 @@ */ predator(amount, multiply) { - let matrix = [ + const matrix = [ 11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount, -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount, -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount, @@ -500,7 +500,7 @@ */ lsd(multiply) { - let matrix = [ + const matrix = [ 2, -0.4, 0.5, 0, 0, -0.5, 2, -0.4, 0, 0, -0.4, -0.5, 3, 0, 0, @@ -516,7 +516,7 @@ */ reset() { - let matrix = [ + const matrix = [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, @@ -546,4 +546,4 @@ //Americanized alias ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale; -export default ColorMatrixFilter; \ No newline at end of file +export default ColorMatrixFilter; diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index d222540..862acc9 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -16,7 +16,7 @@ { constructor(sprite, scale) { - let maskMatrix = new core.Matrix(); + const maskMatrix = new core.Matrix(); sprite.renderable = false; super( @@ -45,7 +45,7 @@ apply(filterManager, input, output) { - let ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); + const ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; @@ -71,4 +71,4 @@ } } -export default DisplacementFilter; \ No newline at end of file +export default DisplacementFilter; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index eb6623e..d5c1467 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,7 @@ target: null, type: null, data: this.mouse, - stopPropagation:function(){ + stopPropagation(){ this.stopped = true; } }; @@ -324,13 +324,13 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution) + setTargetElement(element, resolution=1) { this.removeEvents(); this.interactionDOMElement = element; - this.resolution = resolution || 1; + this.resolution = resolution; this.addEvents(); } @@ -557,7 +557,7 @@ // This will allow pixi to completly ignore and bypass checking the displayObjects children. if(displayObject.interactiveChildren) { - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length-1; i >= 0; i--) { @@ -700,10 +700,10 @@ */ processMouseUp( displayObject, hit ) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; - let isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isRightButton = e.button === 2 || e.which === 3; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; if(hit) { @@ -862,14 +862,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; //TODO POOL - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -914,14 +914,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -980,14 +980,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -1026,12 +1026,7 @@ */ getTouchData(touchEvent) { - let touchData = this.interactiveDataPool.pop(); - - if(!touchData) - { - touchData = new InteractionData(); - } + const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index e32ee4c..4b034b1 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -4,9 +4,9 @@ import path from 'path'; function parse(resource, texture) { - let data = {}; - let info = resource.data.getElementsByTagName('info')[0]; - let common = resource.data.getElementsByTagName('common')[0]; + const data = {}; + const info = resource.data.getElementsByTagName('info')[0]; + const common = resource.data.getElementsByTagName('common')[0]; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); @@ -18,9 +18,9 @@ for (let i = 0; i < letters.length; i++) { - let charCode = parseInt(letters[i].getAttribute('id'), 10); + const charCode = parseInt(letters[i].getAttribute('id'), 10); - let textureRect = new core.Rectangle( + const textureRect = new core.Rectangle( parseInt(letters[i].getAttribute('x'), 10) + texture.frame.x, parseInt(letters[i].getAttribute('y'), 10) + texture.frame.y, parseInt(letters[i].getAttribute('width'), 10), @@ -38,12 +38,12 @@ } //parse kernings - let kernings = resource.data.getElementsByTagName('kerning'); + const kernings = resource.data.getElementsByTagName('kerning'); for (let i = 0; i < kernings.length; i++) { - let first = parseInt(kernings[i].getAttribute('first'), 10); - let second = parseInt(kernings[i].getAttribute('second'), 10); - let amount = parseInt(kernings[i].getAttribute('amount'), 10); + const first = parseInt(kernings[i].getAttribute('first'), 10); + const second = parseInt(kernings[i].getAttribute('second'), 10); + const amount = parseInt(kernings[i].getAttribute('amount'), 10); if(data.chars[second]) { @@ -96,12 +96,12 @@ xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } - + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { xmlUrl += '/'; } - + let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); if (core.utils.TextureCache[textureUrl]) { //reuse existing texture @@ -115,7 +115,7 @@ metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, function (res) { + this.add(resource.name + '_image', textureUrl, loadOptions, res => { parse(resource, res.texture); next(); }); diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 3fa8b7f..34a60b4 100644 --- a/src/loaders/spritesheetParser.js +++ b/src/loaders/spritesheetParser.js @@ -9,7 +9,7 @@ return function (resource, next) { let resourcePath; - let imageResourceName = resource.name + '_image'; + let imageResourceName = `${resource.name}_image`; // skip if no data, its not json, it isn't spritesheet data, or the image resource already exists if (!resource.data || !resource.isJson || !resource.data.frames || this.resources[imageResourceName]) @@ -17,7 +17,7 @@ return next(); } - let loadOptions = { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata @@ -30,7 +30,7 @@ } else { - resourcePath = path.dirname(resource.url.replace(this.baseUrl, '')) + '/' + resource.data.meta.image; + resourcePath = `${path.dirname(resource.url.replace(this.baseUrl, ''))}/${resource.data.meta.image}`; } // load the image for this sheet @@ -38,9 +38,9 @@ { resource.textures = {}; - let frames = resource.data.frames; - let frameKeys = Object.keys(frames); - let resolution = core.utils.getResolutionOfUrl(resource.url); + const frames = resource.data.frames; + const frameKeys = Object.keys(frames); + const resolution = core.utils.getResolutionOfUrl(resource.url); let batchIndex = 0; function processFrames(initialFrameIndex, maxFrames) @@ -50,14 +50,14 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { let i = frameKeys[frameIndex]; - let rect = frames[i].frame; + const rect = frames[i].frame; if (rect) { let frame = null; let trim = null; - let orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); + const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); if (frames[i].rotated) { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); @@ -101,7 +101,7 @@ } function iteration() { - processNextBatch(function() { + processNextBatch(() => { if (shouldProcessNextBatch()) { iteration(); } else { diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index f269992..0c2eff2 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -122,7 +122,7 @@ renderer.flush(); // renderer.plugins.mesh.render(this); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -172,7 +172,7 @@ glData.shader.uniforms.alpha = this.worldAlpha; glData.shader.uniforms.tint = this.tintRgb; - let drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; + const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() .draw(drawMode, this.indices.length) @@ -187,10 +187,10 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -220,16 +220,16 @@ _renderCanvasTriangleMesh(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; + const vertices = this.vertices; + const uvs = this.uvs; - let length = vertices.length / 2; + const length = vertices.length / 2; // this.count++; for (let i = 0; i < length - 2; i++) { // draw some triangles! - let index = i * 2; + const index = i * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index, (index + 2), (index + 4)); } } @@ -243,17 +243,17 @@ _renderCanvasTriangles(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; - let indices = this.indices; + const vertices = this.vertices; + const uvs = this.uvs; + const indices = this.indices; - let length = indices.length; + const length = indices.length; // this.count++; for (let i = 0; i < length; i += 3) { // draw some triangles! - let index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; + const index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2); } } @@ -271,23 +271,23 @@ */ _renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2) { - let base = this._texture.baseTexture; - let textureSource = base.source; - let textureWidth = base.width; - let textureHeight = base.height; + const base = this._texture.baseTexture; + const textureSource = base.source; + const textureWidth = base.width; + const textureHeight = base.height; let x0 = vertices[index0], x1 = vertices[index1], x2 = vertices[index2]; let y0 = vertices[index0 + 1], y1 = vertices[index1 + 1], y2 = vertices[index2 + 1]; - let u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; - let v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; + const u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; + const v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; if (this.canvasPadding > 0) { - let paddingX = this.canvasPadding / this.worldTransform.a; - let paddingY = this.canvasPadding / this.worldTransform.d; - let centerX = (x0 + x1 + x2) / 3; - let centerY = (y0 + y1 + y2) / 3; + const paddingX = this.canvasPadding / this.worldTransform.a; + const paddingY = this.canvasPadding / this.worldTransform.d; + const centerX = (x0 + x1 + x2) / 3; + const centerY = (y0 + y1 + y2) / 3; let normX = x0 - centerX; let normY = y0 - centerY; @@ -326,13 +326,13 @@ context.clip(); // Compute matrix transform - let delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); - let deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); - let deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); - let deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); - let deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); - let deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); - let deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); + const delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); + const deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); + const deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); + const deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); + const deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); + const deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); + const deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); context.transform(deltaA / delta, deltaD / delta, deltaB / delta, deltaE / delta, @@ -352,20 +352,20 @@ */ renderMeshFlat(Mesh) { - let context = this.context; - let vertices = Mesh.vertices; + const context = this.context; + const vertices = Mesh.vertices; - let length = vertices.length/2; + const length = vertices.length/2; // this.count++; context.beginPath(); for (let i=1; i < length-2; i++) { // draw some triangles! - let index = i*2; + const index = i*2; - let x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; - let y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; + const x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; + const y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; context.moveTo(x0, y0); context.lineTo(x1, y1); diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index df10640..b179b10 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -5,7 +5,7 @@ /** * The NineSlicePlane allows you to stretch a texture using 9-slice scaling. The corners will remain unscaled (useful * for buttons with rounded corners for example) and the other areas will be scaled horizontally and or vertically - * + * *```js * let Plane9 = new PIXI.NineSlicePlane(PIXI.Texture.fromImage('BoxWithRoundedCorners.png'), 15, 15, 15, 15); * ``` @@ -44,7 +44,7 @@ { super(texture, 4, 4); - let uvs = this.uvs; + const uvs = this.uvs; // right and bottom uv's are always 1 uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; @@ -102,14 +102,14 @@ } updateHorizontalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[9] = vertices[11] = vertices[13] = vertices[15] = this._topHeight; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - this._bottomHeight; vertices[25] = vertices[27] = vertices[29] = vertices[31] = this._height; } updateVerticalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[2] = vertices[10] = vertices[18] = vertices[26] = this._leftWidth; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - this._rightWidth; vertices[6] = vertices[14] = vertices[22] = vertices[30] = this._width ; @@ -123,11 +123,11 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; context.globalAlpha = this.worldAlpha; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -137,12 +137,12 @@ { context.setTransform(transform.a * res, transform.b * res, transform.c * res, transform.d * res, transform.tx * res, transform.ty * res); } - - let base = this._texture.baseTexture; - let textureSource = base.source; - let w = base.width; - let h = base.height; - + + const base = this._texture.baseTexture; + const textureSource = base.source; + const w = base.width; + const h = base.height; + this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); this.drawSegment(context, textureSource, w, h, 4, 5, 14, 15); @@ -163,8 +163,8 @@ * @param textureSource * @param w width of the texture * @param h height of the texture - * @param x1 - * @param y1 + * @param x1 + * @param y1 * @param x2 * @param y2 * @private @@ -172,14 +172,14 @@ drawSegment(context, textureSource, w, h, x1, y1, x2, y2) { // otherwise you get weird results when using slices of that are 0 wide or high. - let uvs = this.uvs; - let vertices = this.vertices; - + const uvs = this.uvs; + const vertices = this.vertices; + let sw = (uvs[x2]-uvs[x1]) * w; let sh = (uvs[y2]-uvs[y1]) * h; let dw = vertices[x2] - vertices[x1]; let dh = vertices[y2] - vertices[y1]; - + // make sure the source is at least 1 pixel wide and high, otherwise nothing will be drawn. if (sw<1) { sw=1; @@ -213,7 +213,7 @@ this._width = value; this.updateVerticalVertices(); } - + /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -231,7 +231,7 @@ this._height = value; this.updateHorizontalVertices(); } - + /** * The width of the left column @@ -245,13 +245,13 @@ set leftWidth (value) { this._leftWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; this.dirty=true; } - + /** * The width of the right column * @@ -264,13 +264,13 @@ set rightWidth(value) { this._rightWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - this._uvw * value; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; this.dirty=true; } - + /** * The height of the top row @@ -284,13 +284,13 @@ set topHeight(value) { this._topHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; this.dirty=true; } - + /** * The height of the bottom row * @@ -303,12 +303,12 @@ set bottomHeight(value) { this._bottomHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - this._uvh * value; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; this.dirty=true; } } -export default NineSlicePlane; \ No newline at end of file +export default NineSlicePlane; diff --git a/src/mesh/Plane.js b/src/mesh/Plane.js index a1d7cdc..27182f6 100644 --- a/src/mesh/Plane.js +++ b/src/mesh/Plane.js @@ -46,24 +46,23 @@ */ refresh() { - let total = this.verticesX * this.verticesY; - let verts = []; - let colors = []; - let uvs = []; - let indices = []; - let texture = this.texture; + const total = this.verticesX * this.verticesY; + const verts = []; + const colors = []; + const uvs = []; + const indices = []; + const texture = this.texture; - let segmentsX = this.verticesX - 1; - let segmentsY = this.verticesY - 1; - let i = 0; + const segmentsX = this.verticesX - 1; + const segmentsY = this.verticesY - 1; - let sizeX = texture.width / segmentsX; - let sizeY = texture.height / segmentsY; + const sizeX = texture.width / segmentsX; + const sizeY = texture.height / segmentsY; - for (i = 0; i < total; i++) { + for (let i = 0; i < total; i++) { - let x = (i % this.verticesX); - let y = ( (i / this.verticesX ) | 0 ); + const x = (i % this.verticesX); + const y = ( (i / this.verticesX ) | 0 ); verts.push((x * sizeX), @@ -77,16 +76,16 @@ let totalSub = segmentsX * segmentsY; - for (i = 0; i < totalSub; i++) { + for (let i = 0; i < totalSub; i++) { - let xpos = i % segmentsX; - let ypos = (i / segmentsX ) | 0; + const xpos = i % segmentsX; + const ypos = (i / segmentsX ) | 0; - let value = (ypos * this.verticesX) + xpos; - let value2 = (ypos * this.verticesX) + xpos + 1; - let value3 = ((ypos+1) * this.verticesX) + xpos; - let value4 = ((ypos+1) * this.verticesX) + xpos + 1; + const value = (ypos * this.verticesX) + xpos; + const value2 = (ypos * this.verticesX) + xpos + 1; + const value3 = ((ypos+1) * this.verticesX) + xpos; + const value4 = ((ypos+1) * this.verticesX) + xpos + 1; indices.push(value, value2, value3); indices.push(value2, value4, value3); diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index 2a39aa6..74e156e 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -67,7 +67,7 @@ */ refresh() { - let points = this.points; + const points = this.points; // if too little points, or texture hasn't got UVs set yet just move on. if (points.length < 1 || !this._texture._uvs) @@ -75,14 +75,14 @@ return; } - let uvs = this.uvs; + const uvs = this.uvs; - let indices = this.indices; - let colors = this.colors; + const indices = this.indices; + const colors = this.colors; - let textureUvs = this._texture._uvs; - let offset = new core.Point(textureUvs.x0, textureUvs.y0); - let factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const textureUvs = this._texture._uvs; + const offset = new core.Point(textureUvs.x0, textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; @@ -95,8 +95,8 @@ indices[0] = 0; indices[1] = 1; - let total = points.length, - index, amount; + const total = points.length; + let index, amount; for (let i = 1; i < total; i++) { diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 5161e02..eec70a6 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -44,7 +44,7 @@ // Making sure the batch size is valid // 65535 is max vertex index in the index buffer (see ParticleRenderer) // so max number of particles is 65536 / 4 = 16384 - let maxBatchSize = 16384; + const maxBatchSize = 16384; if (batchSize > maxBatchSize) { batchSize = maxBatchSize; } @@ -161,9 +161,7 @@ this.baseTexture = this.children[0]._texture.baseTexture; if(!this.baseTexture.hasLoaded) { - this.baseTexture.once('update', function(){ - this.onChildrenChange(0); - }, this); + this.baseTexture.once('update', () => this.onChildrenChange(0)); } } @@ -179,7 +177,7 @@ */ onChildrenChange(smallestChildIndex) { - let bufferIndex = Math.floor(smallestChildIndex / this._batchSize); + const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); if (bufferIndex < this._bufferToUpdate) { this._bufferToUpdate = bufferIndex; } @@ -198,8 +196,8 @@ return; } - let context = renderer.context; - let transform = this.worldTransform; + const context = renderer.context; + const transform = this.worldTransform; let isRotated = true; let positionX = 0; @@ -208,7 +206,7 @@ let finalWidth = 0; let finalHeight = 0; - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -220,14 +218,14 @@ for (let i = 0; i < this.children.length; ++i) { - let child = this.children[i]; + const child = this.children[i]; if (!child.visible) { continue; } - let frame = child.texture.frame; + const frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -264,7 +262,7 @@ child.displayObjectUpdateTransform(); - let childTransform = child.worldTransform; + const childTransform = child.worldTransform; if (renderer.roundPixels) { @@ -296,7 +294,7 @@ finalHeight = frame.height; } - let resolution = child.texture.baseTexture.resolution; + const resolution = child.texture.baseTexture.resolution; context.drawImage( child.texture.baseTexture.source, diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 6808183..2c5a7e5 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -71,7 +71,7 @@ // Make copy of properties object so that when we edit the offset it doesn't // change all other instances of the object literal - property = + property = { attribute:property.attribute, size:property.size, @@ -108,12 +108,9 @@ */ initBuffers() { - let gl = this.gl; - let i; - let property; - + const gl = this.gl; let dynamicOffset = 0; - + let property; /** * Holds the indices of the geometry (quads) to draw @@ -126,7 +123,7 @@ this.dynamicStride = 0; - for (i = 0; i < this.dynamicProperties.length; i++) + for (let i = 0; i < this.dynamicProperties.length; i++) { property = this.dynamicProperties[i]; @@ -142,7 +139,7 @@ let staticOffset = 0; this.staticStride = 0; - for (i = 0; i < this.staticProperties.length; i++) + for (let i = 0; i < this.staticProperties.length; i++) { property = this.staticProperties[i]; @@ -160,13 +157,13 @@ this.vao = new glCore.VertexArrayObject(gl) .addIndex(this.indexBuffer); - for (i = 0; i < this.dynamicProperties.length; i++) + for (let i = 0; i < this.dynamicProperties.length; i++) { property = this.dynamicProperties[i]; this.vao.addAttribute(this.dynamicBuffer, property.attribute, gl.FLOAT, false, this.dynamicStride * 4, property.offset * 4); } - for (i = 0; i < this.staticProperties.length; i++) + for (let i = 0; i < this.staticProperties.length; i++) { property = this.staticProperties[i]; this.vao.addAttribute(this.staticBuffer, property.attribute, gl.FLOAT, false, this.staticStride * 4, property.offset * 4); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 8fe6acf..3f3a4fe 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -55,7 +55,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; @@ -119,10 +119,10 @@ */ render(container) { - let children = container.children, - totalChildren = children.length, + const children = container.children, maxSize = container._maxSize, batchSize = container._batchSize; + let totalChildren = children.length; if(totalChildren === 0) { @@ -143,16 +143,16 @@ // if the uvs have not updated then no point rendering just yet! this.renderer.setBlendMode(container.blendMode); - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let m = container.worldTransform.copy( this.tempMatrix ); + const m = container.worldTransform.copy( this.tempMatrix ); m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); this.shader.uniforms.projectionMatrix = m.toArray(true); this.shader.uniforms.uAlpha = container.worldAlpha; // make sure the texture is bound.. - let baseTexture = children[0]._texture.baseTexture; + const baseTexture = children[0]._texture.baseTexture; this.renderer.bindTexture(baseTexture); @@ -165,7 +165,7 @@ amount = batchSize; } - let buffer = buffers[j]; + const buffer = buffers[j]; // we always upload the dynamic buffer.uploadDynamic(children, i, amount); @@ -195,14 +195,13 @@ */ generateBuffers(container) { - let gl = this.renderer.gl, + const gl = this.renderer.gl, buffers = [], size = container._maxSize, batchSize = container._batchSize, - dynamicPropertyFlags = container._properties, - i; + dynamicPropertyFlags = container._properties; - for (i = 0; i < size; i += batchSize) + for (let i = 0; i < size; i += batchSize) { buffers.push(new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize)); } @@ -288,7 +287,7 @@ { for (let i = 0; i < amount; i++) { - let spritePosition = children[startIndex + i].position; + const spritePosition = children[startIndex + i].position; array[offset] = spritePosition.x; array[offset + 1] = spritePosition.y; @@ -320,7 +319,7 @@ { for (let i = 0; i < amount; i++) { - let spriteRotation = children[startIndex + i].rotation; + const spriteRotation = children[startIndex + i].rotation; array[offset] = spriteRotation; @@ -345,7 +344,7 @@ { for (let i = 0; i < amount; i++) { - let textureUvs = children[startIndex + i]._texture._uvs; + const textureUvs = children[startIndex + i]._texture._uvs; if (textureUvs) { @@ -396,7 +395,7 @@ { for (let i = 0; i < amount; i++) { - let spriteAlpha = children[startIndex + i].alpha; + const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; array[offset + stride] = spriteAlpha; diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index a83aa79..da79b08 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -107,7 +107,7 @@ _colorMatrix(matrix) { // Create a Float32 Array and normalize the offset component to 0-1 - let m = new Float32Array(matrix); + const m = new Float32Array(matrix); m[4] /= 255; m[9] /= 255; m[14] /= 255; @@ -124,7 +124,7 @@ */ brightness(b, multiply) { - let matrix = [ + const matrix = [ b, 0, 0, 0, 0, 0, b, 0, 0, 0, 0, 0, b, 0, 0, @@ -142,7 +142,7 @@ */ greyscale(scale, multiply) { - let matrix = [ + const matrix = [ scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, @@ -160,7 +160,7 @@ */ blackAndWhite(multiply) { - let matrix = [ + const matrix = [ 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, @@ -180,7 +180,7 @@ { rotation = (rotation || 0) / 180 * Math.PI; - let cosR = Math.cos(rotation), + const cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; @@ -197,22 +197,22 @@ see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - let w = 1/3, sqrW = sqrt(w);//weight is + const w = 1/3, sqrW = sqrt(w);//weight is - let a00 = cosR + (1.0 - cosR) * w; - let a01 = w * (1.0 - cosR) - sqrW * sinR; - let a02 = w * (1.0 - cosR) + sqrW * sinR; + const a00 = cosR + (1.0 - cosR) * w; + const a01 = w * (1.0 - cosR) - sqrW * sinR; + const a02 = w * (1.0 - cosR) + sqrW * sinR; - let a10 = w * (1.0 - cosR) + sqrW * sinR; - let a11 = cosR + w*(1.0 - cosR); - let a12 = w * (1.0 - cosR) - sqrW * sinR; + const a10 = w * (1.0 - cosR) + sqrW * sinR; + const a11 = cosR + w*(1.0 - cosR); + const a12 = w * (1.0 - cosR) - sqrW * sinR; - let a20 = w * (1.0 - cosR) - sqrW * sinR; - let a21 = w * (1.0 - cosR) + sqrW * sinR; - let a22 = cosR + w * (1.0 - cosR); + const a20 = w * (1.0 - cosR) - sqrW * sinR; + const a21 = w * (1.0 - cosR) + sqrW * sinR; + const a22 = cosR + w * (1.0 - cosR); - let matrix = [ + const matrix = [ a00, a01, a02, 0, 0, a10, a11, a12, 0, 0, a20, a21, a22, 0, 0, @@ -233,10 +233,10 @@ */ contrast(amount, multiply) { - let v = (amount || 0) + 1; - let o = -128 * (v - 1); + const v = (amount || 0) + 1; + const o = -128 * (v - 1); - let matrix = [ + const matrix = [ v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, @@ -255,10 +255,10 @@ */ saturate(amount, multiply) { - let x = (amount || 0) * 2 / 3 + 1; - let y = ((x - 1) * -0.5); + const x = (amount || 0) * 2 / 3 + 1; + const y = ((x - 1) * -0.5); - let matrix = [ + const matrix = [ x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, @@ -286,7 +286,7 @@ */ negative(multiply) { - let matrix = [ + const matrix = [ 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, @@ -303,7 +303,7 @@ */ sepia(multiply) { - let matrix = [ + const matrix = [ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, @@ -320,7 +320,7 @@ */ technicolor(multiply) { - let matrix = [ + const matrix = [ 1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138, @@ -337,7 +337,7 @@ */ polaroid(multiply) { - let matrix = [ + const matrix = [ 1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, @@ -354,7 +354,7 @@ */ toBGR(multiply) { - let matrix = [ + const matrix = [ 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, @@ -371,7 +371,7 @@ */ kodachrome(multiply) { - let matrix = [ + const matrix = [ 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, @@ -388,7 +388,7 @@ */ browni(multiply) { - let matrix = [ + const matrix = [ 0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283, @@ -405,7 +405,7 @@ */ vintage(multiply) { - let matrix = [ + const matrix = [ 0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123, 0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591, 0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296, @@ -432,15 +432,15 @@ lightColor = lightColor || 0xFFE580; darkColor = darkColor || 0x338000; - let lR = ((lightColor >> 16) & 0xFF) / 255; - let lG = ((lightColor >> 8) & 0xFF) / 255; - let lB = (lightColor & 0xFF) / 255; + const lR = ((lightColor >> 16) & 0xFF) / 255; + const lG = ((lightColor >> 8) & 0xFF) / 255; + const lB = (lightColor & 0xFF) / 255; - let dR = ((darkColor >> 16) & 0xFF) / 255; - let dG = ((darkColor >> 8) & 0xFF) / 255; - let dB = (darkColor & 0xFF) / 255; + const dR = ((darkColor >> 16) & 0xFF) / 255; + const dG = ((darkColor >> 8) & 0xFF) / 255; + const dB = (darkColor & 0xFF) / 255; - let matrix = [ + const matrix = [ 0.3, 0.59, 0.11, 0, 0, lR, lG, lB, desaturation, 0, dR, dG, dB, toned, 0, @@ -459,7 +459,7 @@ night(intensity, multiply) { intensity = intensity || 0.1; - let matrix = [ + const matrix = [ intensity * ( -2.0), -intensity, 0, 0, 0, -intensity, 0, intensity, 0, 0, 0, intensity, intensity * 2.0, 0, 0, @@ -480,7 +480,7 @@ */ predator(amount, multiply) { - let matrix = [ + const matrix = [ 11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount, -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount, -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount, @@ -500,7 +500,7 @@ */ lsd(multiply) { - let matrix = [ + const matrix = [ 2, -0.4, 0.5, 0, 0, -0.5, 2, -0.4, 0, 0, -0.4, -0.5, 3, 0, 0, @@ -516,7 +516,7 @@ */ reset() { - let matrix = [ + const matrix = [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, @@ -546,4 +546,4 @@ //Americanized alias ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale; -export default ColorMatrixFilter; \ No newline at end of file +export default ColorMatrixFilter; diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index d222540..862acc9 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -16,7 +16,7 @@ { constructor(sprite, scale) { - let maskMatrix = new core.Matrix(); + const maskMatrix = new core.Matrix(); sprite.renderable = false; super( @@ -45,7 +45,7 @@ apply(filterManager, input, output) { - let ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); + const ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; @@ -71,4 +71,4 @@ } } -export default DisplacementFilter; \ No newline at end of file +export default DisplacementFilter; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index eb6623e..d5c1467 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,7 @@ target: null, type: null, data: this.mouse, - stopPropagation:function(){ + stopPropagation(){ this.stopped = true; } }; @@ -324,13 +324,13 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution) + setTargetElement(element, resolution=1) { this.removeEvents(); this.interactionDOMElement = element; - this.resolution = resolution || 1; + this.resolution = resolution; this.addEvents(); } @@ -557,7 +557,7 @@ // This will allow pixi to completly ignore and bypass checking the displayObjects children. if(displayObject.interactiveChildren) { - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length-1; i >= 0; i--) { @@ -700,10 +700,10 @@ */ processMouseUp( displayObject, hit ) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; - let isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isRightButton = e.button === 2 || e.which === 3; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; if(hit) { @@ -862,14 +862,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; //TODO POOL - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -914,14 +914,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -980,14 +980,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -1026,12 +1026,7 @@ */ getTouchData(touchEvent) { - let touchData = this.interactiveDataPool.pop(); - - if(!touchData) - { - touchData = new InteractionData(); - } + const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index e32ee4c..4b034b1 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -4,9 +4,9 @@ import path from 'path'; function parse(resource, texture) { - let data = {}; - let info = resource.data.getElementsByTagName('info')[0]; - let common = resource.data.getElementsByTagName('common')[0]; + const data = {}; + const info = resource.data.getElementsByTagName('info')[0]; + const common = resource.data.getElementsByTagName('common')[0]; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); @@ -18,9 +18,9 @@ for (let i = 0; i < letters.length; i++) { - let charCode = parseInt(letters[i].getAttribute('id'), 10); + const charCode = parseInt(letters[i].getAttribute('id'), 10); - let textureRect = new core.Rectangle( + const textureRect = new core.Rectangle( parseInt(letters[i].getAttribute('x'), 10) + texture.frame.x, parseInt(letters[i].getAttribute('y'), 10) + texture.frame.y, parseInt(letters[i].getAttribute('width'), 10), @@ -38,12 +38,12 @@ } //parse kernings - let kernings = resource.data.getElementsByTagName('kerning'); + const kernings = resource.data.getElementsByTagName('kerning'); for (let i = 0; i < kernings.length; i++) { - let first = parseInt(kernings[i].getAttribute('first'), 10); - let second = parseInt(kernings[i].getAttribute('second'), 10); - let amount = parseInt(kernings[i].getAttribute('amount'), 10); + const first = parseInt(kernings[i].getAttribute('first'), 10); + const second = parseInt(kernings[i].getAttribute('second'), 10); + const amount = parseInt(kernings[i].getAttribute('amount'), 10); if(data.chars[second]) { @@ -96,12 +96,12 @@ xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } - + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { xmlUrl += '/'; } - + let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); if (core.utils.TextureCache[textureUrl]) { //reuse existing texture @@ -115,7 +115,7 @@ metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, function (res) { + this.add(resource.name + '_image', textureUrl, loadOptions, res => { parse(resource, res.texture); next(); }); diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 3fa8b7f..34a60b4 100644 --- a/src/loaders/spritesheetParser.js +++ b/src/loaders/spritesheetParser.js @@ -9,7 +9,7 @@ return function (resource, next) { let resourcePath; - let imageResourceName = resource.name + '_image'; + let imageResourceName = `${resource.name}_image`; // skip if no data, its not json, it isn't spritesheet data, or the image resource already exists if (!resource.data || !resource.isJson || !resource.data.frames || this.resources[imageResourceName]) @@ -17,7 +17,7 @@ return next(); } - let loadOptions = { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata @@ -30,7 +30,7 @@ } else { - resourcePath = path.dirname(resource.url.replace(this.baseUrl, '')) + '/' + resource.data.meta.image; + resourcePath = `${path.dirname(resource.url.replace(this.baseUrl, ''))}/${resource.data.meta.image}`; } // load the image for this sheet @@ -38,9 +38,9 @@ { resource.textures = {}; - let frames = resource.data.frames; - let frameKeys = Object.keys(frames); - let resolution = core.utils.getResolutionOfUrl(resource.url); + const frames = resource.data.frames; + const frameKeys = Object.keys(frames); + const resolution = core.utils.getResolutionOfUrl(resource.url); let batchIndex = 0; function processFrames(initialFrameIndex, maxFrames) @@ -50,14 +50,14 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { let i = frameKeys[frameIndex]; - let rect = frames[i].frame; + const rect = frames[i].frame; if (rect) { let frame = null; let trim = null; - let orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); + const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); if (frames[i].rotated) { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); @@ -101,7 +101,7 @@ } function iteration() { - processNextBatch(function() { + processNextBatch(() => { if (shouldProcessNextBatch()) { iteration(); } else { diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index f269992..0c2eff2 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -122,7 +122,7 @@ renderer.flush(); // renderer.plugins.mesh.render(this); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -172,7 +172,7 @@ glData.shader.uniforms.alpha = this.worldAlpha; glData.shader.uniforms.tint = this.tintRgb; - let drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; + const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() .draw(drawMode, this.indices.length) @@ -187,10 +187,10 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -220,16 +220,16 @@ _renderCanvasTriangleMesh(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; + const vertices = this.vertices; + const uvs = this.uvs; - let length = vertices.length / 2; + const length = vertices.length / 2; // this.count++; for (let i = 0; i < length - 2; i++) { // draw some triangles! - let index = i * 2; + const index = i * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index, (index + 2), (index + 4)); } } @@ -243,17 +243,17 @@ _renderCanvasTriangles(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; - let indices = this.indices; + const vertices = this.vertices; + const uvs = this.uvs; + const indices = this.indices; - let length = indices.length; + const length = indices.length; // this.count++; for (let i = 0; i < length; i += 3) { // draw some triangles! - let index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; + const index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2); } } @@ -271,23 +271,23 @@ */ _renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2) { - let base = this._texture.baseTexture; - let textureSource = base.source; - let textureWidth = base.width; - let textureHeight = base.height; + const base = this._texture.baseTexture; + const textureSource = base.source; + const textureWidth = base.width; + const textureHeight = base.height; let x0 = vertices[index0], x1 = vertices[index1], x2 = vertices[index2]; let y0 = vertices[index0 + 1], y1 = vertices[index1 + 1], y2 = vertices[index2 + 1]; - let u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; - let v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; + const u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; + const v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; if (this.canvasPadding > 0) { - let paddingX = this.canvasPadding / this.worldTransform.a; - let paddingY = this.canvasPadding / this.worldTransform.d; - let centerX = (x0 + x1 + x2) / 3; - let centerY = (y0 + y1 + y2) / 3; + const paddingX = this.canvasPadding / this.worldTransform.a; + const paddingY = this.canvasPadding / this.worldTransform.d; + const centerX = (x0 + x1 + x2) / 3; + const centerY = (y0 + y1 + y2) / 3; let normX = x0 - centerX; let normY = y0 - centerY; @@ -326,13 +326,13 @@ context.clip(); // Compute matrix transform - let delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); - let deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); - let deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); - let deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); - let deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); - let deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); - let deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); + const delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); + const deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); + const deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); + const deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); + const deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); + const deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); + const deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); context.transform(deltaA / delta, deltaD / delta, deltaB / delta, deltaE / delta, @@ -352,20 +352,20 @@ */ renderMeshFlat(Mesh) { - let context = this.context; - let vertices = Mesh.vertices; + const context = this.context; + const vertices = Mesh.vertices; - let length = vertices.length/2; + const length = vertices.length/2; // this.count++; context.beginPath(); for (let i=1; i < length-2; i++) { // draw some triangles! - let index = i*2; + const index = i*2; - let x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; - let y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; + const x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; + const y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; context.moveTo(x0, y0); context.lineTo(x1, y1); diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index df10640..b179b10 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -5,7 +5,7 @@ /** * The NineSlicePlane allows you to stretch a texture using 9-slice scaling. The corners will remain unscaled (useful * for buttons with rounded corners for example) and the other areas will be scaled horizontally and or vertically - * + * *```js * let Plane9 = new PIXI.NineSlicePlane(PIXI.Texture.fromImage('BoxWithRoundedCorners.png'), 15, 15, 15, 15); * ``` @@ -44,7 +44,7 @@ { super(texture, 4, 4); - let uvs = this.uvs; + const uvs = this.uvs; // right and bottom uv's are always 1 uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; @@ -102,14 +102,14 @@ } updateHorizontalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[9] = vertices[11] = vertices[13] = vertices[15] = this._topHeight; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - this._bottomHeight; vertices[25] = vertices[27] = vertices[29] = vertices[31] = this._height; } updateVerticalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[2] = vertices[10] = vertices[18] = vertices[26] = this._leftWidth; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - this._rightWidth; vertices[6] = vertices[14] = vertices[22] = vertices[30] = this._width ; @@ -123,11 +123,11 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; context.globalAlpha = this.worldAlpha; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -137,12 +137,12 @@ { context.setTransform(transform.a * res, transform.b * res, transform.c * res, transform.d * res, transform.tx * res, transform.ty * res); } - - let base = this._texture.baseTexture; - let textureSource = base.source; - let w = base.width; - let h = base.height; - + + const base = this._texture.baseTexture; + const textureSource = base.source; + const w = base.width; + const h = base.height; + this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); this.drawSegment(context, textureSource, w, h, 4, 5, 14, 15); @@ -163,8 +163,8 @@ * @param textureSource * @param w width of the texture * @param h height of the texture - * @param x1 - * @param y1 + * @param x1 + * @param y1 * @param x2 * @param y2 * @private @@ -172,14 +172,14 @@ drawSegment(context, textureSource, w, h, x1, y1, x2, y2) { // otherwise you get weird results when using slices of that are 0 wide or high. - let uvs = this.uvs; - let vertices = this.vertices; - + const uvs = this.uvs; + const vertices = this.vertices; + let sw = (uvs[x2]-uvs[x1]) * w; let sh = (uvs[y2]-uvs[y1]) * h; let dw = vertices[x2] - vertices[x1]; let dh = vertices[y2] - vertices[y1]; - + // make sure the source is at least 1 pixel wide and high, otherwise nothing will be drawn. if (sw<1) { sw=1; @@ -213,7 +213,7 @@ this._width = value; this.updateVerticalVertices(); } - + /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -231,7 +231,7 @@ this._height = value; this.updateHorizontalVertices(); } - + /** * The width of the left column @@ -245,13 +245,13 @@ set leftWidth (value) { this._leftWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; this.dirty=true; } - + /** * The width of the right column * @@ -264,13 +264,13 @@ set rightWidth(value) { this._rightWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - this._uvw * value; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; this.dirty=true; } - + /** * The height of the top row @@ -284,13 +284,13 @@ set topHeight(value) { this._topHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; this.dirty=true; } - + /** * The height of the bottom row * @@ -303,12 +303,12 @@ set bottomHeight(value) { this._bottomHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - this._uvh * value; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; this.dirty=true; } } -export default NineSlicePlane; \ No newline at end of file +export default NineSlicePlane; diff --git a/src/mesh/Plane.js b/src/mesh/Plane.js index a1d7cdc..27182f6 100644 --- a/src/mesh/Plane.js +++ b/src/mesh/Plane.js @@ -46,24 +46,23 @@ */ refresh() { - let total = this.verticesX * this.verticesY; - let verts = []; - let colors = []; - let uvs = []; - let indices = []; - let texture = this.texture; + const total = this.verticesX * this.verticesY; + const verts = []; + const colors = []; + const uvs = []; + const indices = []; + const texture = this.texture; - let segmentsX = this.verticesX - 1; - let segmentsY = this.verticesY - 1; - let i = 0; + const segmentsX = this.verticesX - 1; + const segmentsY = this.verticesY - 1; - let sizeX = texture.width / segmentsX; - let sizeY = texture.height / segmentsY; + const sizeX = texture.width / segmentsX; + const sizeY = texture.height / segmentsY; - for (i = 0; i < total; i++) { + for (let i = 0; i < total; i++) { - let x = (i % this.verticesX); - let y = ( (i / this.verticesX ) | 0 ); + const x = (i % this.verticesX); + const y = ( (i / this.verticesX ) | 0 ); verts.push((x * sizeX), @@ -77,16 +76,16 @@ let totalSub = segmentsX * segmentsY; - for (i = 0; i < totalSub; i++) { + for (let i = 0; i < totalSub; i++) { - let xpos = i % segmentsX; - let ypos = (i / segmentsX ) | 0; + const xpos = i % segmentsX; + const ypos = (i / segmentsX ) | 0; - let value = (ypos * this.verticesX) + xpos; - let value2 = (ypos * this.verticesX) + xpos + 1; - let value3 = ((ypos+1) * this.verticesX) + xpos; - let value4 = ((ypos+1) * this.verticesX) + xpos + 1; + const value = (ypos * this.verticesX) + xpos; + const value2 = (ypos * this.verticesX) + xpos + 1; + const value3 = ((ypos+1) * this.verticesX) + xpos; + const value4 = ((ypos+1) * this.verticesX) + xpos + 1; indices.push(value, value2, value3); indices.push(value2, value4, value3); diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index 2a39aa6..74e156e 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -67,7 +67,7 @@ */ refresh() { - let points = this.points; + const points = this.points; // if too little points, or texture hasn't got UVs set yet just move on. if (points.length < 1 || !this._texture._uvs) @@ -75,14 +75,14 @@ return; } - let uvs = this.uvs; + const uvs = this.uvs; - let indices = this.indices; - let colors = this.colors; + const indices = this.indices; + const colors = this.colors; - let textureUvs = this._texture._uvs; - let offset = new core.Point(textureUvs.x0, textureUvs.y0); - let factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const textureUvs = this._texture._uvs; + const offset = new core.Point(textureUvs.x0, textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; @@ -95,8 +95,8 @@ indices[0] = 0; indices[1] = 1; - let total = points.length, - index, amount; + const total = points.length; + let index, amount; for (let i = 1; i < total; i++) { diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 5161e02..eec70a6 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -44,7 +44,7 @@ // Making sure the batch size is valid // 65535 is max vertex index in the index buffer (see ParticleRenderer) // so max number of particles is 65536 / 4 = 16384 - let maxBatchSize = 16384; + const maxBatchSize = 16384; if (batchSize > maxBatchSize) { batchSize = maxBatchSize; } @@ -161,9 +161,7 @@ this.baseTexture = this.children[0]._texture.baseTexture; if(!this.baseTexture.hasLoaded) { - this.baseTexture.once('update', function(){ - this.onChildrenChange(0); - }, this); + this.baseTexture.once('update', () => this.onChildrenChange(0)); } } @@ -179,7 +177,7 @@ */ onChildrenChange(smallestChildIndex) { - let bufferIndex = Math.floor(smallestChildIndex / this._batchSize); + const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); if (bufferIndex < this._bufferToUpdate) { this._bufferToUpdate = bufferIndex; } @@ -198,8 +196,8 @@ return; } - let context = renderer.context; - let transform = this.worldTransform; + const context = renderer.context; + const transform = this.worldTransform; let isRotated = true; let positionX = 0; @@ -208,7 +206,7 @@ let finalWidth = 0; let finalHeight = 0; - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -220,14 +218,14 @@ for (let i = 0; i < this.children.length; ++i) { - let child = this.children[i]; + const child = this.children[i]; if (!child.visible) { continue; } - let frame = child.texture.frame; + const frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -264,7 +262,7 @@ child.displayObjectUpdateTransform(); - let childTransform = child.worldTransform; + const childTransform = child.worldTransform; if (renderer.roundPixels) { @@ -296,7 +294,7 @@ finalHeight = frame.height; } - let resolution = child.texture.baseTexture.resolution; + const resolution = child.texture.baseTexture.resolution; context.drawImage( child.texture.baseTexture.source, diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 6808183..2c5a7e5 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -71,7 +71,7 @@ // Make copy of properties object so that when we edit the offset it doesn't // change all other instances of the object literal - property = + property = { attribute:property.attribute, size:property.size, @@ -108,12 +108,9 @@ */ initBuffers() { - let gl = this.gl; - let i; - let property; - + const gl = this.gl; let dynamicOffset = 0; - + let property; /** * Holds the indices of the geometry (quads) to draw @@ -126,7 +123,7 @@ this.dynamicStride = 0; - for (i = 0; i < this.dynamicProperties.length; i++) + for (let i = 0; i < this.dynamicProperties.length; i++) { property = this.dynamicProperties[i]; @@ -142,7 +139,7 @@ let staticOffset = 0; this.staticStride = 0; - for (i = 0; i < this.staticProperties.length; i++) + for (let i = 0; i < this.staticProperties.length; i++) { property = this.staticProperties[i]; @@ -160,13 +157,13 @@ this.vao = new glCore.VertexArrayObject(gl) .addIndex(this.indexBuffer); - for (i = 0; i < this.dynamicProperties.length; i++) + for (let i = 0; i < this.dynamicProperties.length; i++) { property = this.dynamicProperties[i]; this.vao.addAttribute(this.dynamicBuffer, property.attribute, gl.FLOAT, false, this.dynamicStride * 4, property.offset * 4); } - for (i = 0; i < this.staticProperties.length; i++) + for (let i = 0; i < this.staticProperties.length; i++) { property = this.staticProperties[i]; this.vao.addAttribute(this.staticBuffer, property.attribute, gl.FLOAT, false, this.staticStride * 4, property.offset * 4); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 8fe6acf..3f3a4fe 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -55,7 +55,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; @@ -119,10 +119,10 @@ */ render(container) { - let children = container.children, - totalChildren = children.length, + const children = container.children, maxSize = container._maxSize, batchSize = container._batchSize; + let totalChildren = children.length; if(totalChildren === 0) { @@ -143,16 +143,16 @@ // if the uvs have not updated then no point rendering just yet! this.renderer.setBlendMode(container.blendMode); - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let m = container.worldTransform.copy( this.tempMatrix ); + const m = container.worldTransform.copy( this.tempMatrix ); m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); this.shader.uniforms.projectionMatrix = m.toArray(true); this.shader.uniforms.uAlpha = container.worldAlpha; // make sure the texture is bound.. - let baseTexture = children[0]._texture.baseTexture; + const baseTexture = children[0]._texture.baseTexture; this.renderer.bindTexture(baseTexture); @@ -165,7 +165,7 @@ amount = batchSize; } - let buffer = buffers[j]; + const buffer = buffers[j]; // we always upload the dynamic buffer.uploadDynamic(children, i, amount); @@ -195,14 +195,13 @@ */ generateBuffers(container) { - let gl = this.renderer.gl, + const gl = this.renderer.gl, buffers = [], size = container._maxSize, batchSize = container._batchSize, - dynamicPropertyFlags = container._properties, - i; + dynamicPropertyFlags = container._properties; - for (i = 0; i < size; i += batchSize) + for (let i = 0; i < size; i += batchSize) { buffers.push(new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize)); } @@ -288,7 +287,7 @@ { for (let i = 0; i < amount; i++) { - let spritePosition = children[startIndex + i].position; + const spritePosition = children[startIndex + i].position; array[offset] = spritePosition.x; array[offset + 1] = spritePosition.y; @@ -320,7 +319,7 @@ { for (let i = 0; i < amount; i++) { - let spriteRotation = children[startIndex + i].rotation; + const spriteRotation = children[startIndex + i].rotation; array[offset] = spriteRotation; @@ -345,7 +344,7 @@ { for (let i = 0; i < amount; i++) { - let textureUvs = children[startIndex + i]._texture._uvs; + const textureUvs = children[startIndex + i]._texture._uvs; if (textureUvs) { @@ -396,7 +395,7 @@ { for (let i = 0; i < amount; i++) { - let spriteAlpha = children[startIndex + i].alpha; + const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; array[offset + stride] = spriteAlpha; diff --git a/src/polyfill/Object.assign.js b/src/polyfill/Object.assign.js index 393240e..2c82308 100644 --- a/src/polyfill/Object.assign.js +++ b/src/polyfill/Object.assign.js @@ -2,7 +2,9 @@ // https://github.com/sindresorhus/object-assign // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign +import objectAssign from 'object-assign'; + if (!Object.assign) { - Object.assign = require('object-assign'); + Object.assign = objectAssign; } diff --git a/.editorconfig b/.editorconfig index 40a9837..039947a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -12,5 +12,5 @@ [*.md] trim_trailing_whitespace = false -[{package.json,bower.json,.travis.yml}] +[{package.json,bower.json,.travis.yml,.eslintrc}] indent_size = 2 diff --git a/.eslintrc b/.eslintrc index 1e5930c..f90bdde 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,7 +2,8 @@ "extends": "eslint:recommended", "rules": { "no-console": 0, - "no-debugger": 1 + "no-debugger": 1, + "arrow-spacing": 1 }, "parserOptions": { "ecmaVersion": 6, @@ -20,4 +21,4 @@ "Uint32Array": true, "ArrayBuffer": true } -} \ No newline at end of file +} diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 7524b43..04ff341 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -26,7 +26,7 @@ } // first we create a div that will sit over the pixi element. This is where the div overlays will go. - let div = document.createElement('div'); + const div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; @@ -105,7 +105,7 @@ createTouchHook() { - let hookDiv = document.createElement('button'); + const hookDiv = document.createElement('button'); hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; @@ -115,13 +115,13 @@ hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', function(){ + hookDiv.addEventListener('focus', () => { this.isMobileAccessabillity = true; this.activate(); document.body.removeChild(hookDiv); - }.bind(this)); + }); document.body.appendChild(hookDiv); @@ -199,7 +199,7 @@ displayObject.renderId = this.renderId; } - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length - 1; i >= 0; i--) { @@ -221,9 +221,9 @@ // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); - let rect = this.renderer.view.getBoundingClientRect(); - let sx = rect.width / this.renderer.width; - let sy = rect.height / this.renderer.height; + const rect = this.renderer.view.getBoundingClientRect(); + const sx = rect.width / this.renderer.width; + const sy = rect.height / this.renderer.height; let div = this.div; @@ -235,7 +235,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; if(child.renderId !== this.renderId) { @@ -452,4 +452,4 @@ core.WebGLRenderer.registerPlugin('accessibility', AccessibilityManager); core.CanvasRenderer.registerPlugin('accessibility', AccessibilityManager); -export default AccessibilityManager; \ No newline at end of file +export default AccessibilityManager; diff --git a/src/core/Shader.js b/src/core/Shader.js index 480139c..4d30a45 100644 --- a/src/core/Shader.js +++ b/src/core/Shader.js @@ -7,16 +7,16 @@ { if (src[0].substring(0,9) !== 'precision') { - let copy = src.slice(0); - copy.unshift('precision ' + Const.PRECISION.DEFAULT + ' float;'); + const copy = src.slice(0); + copy.unshift(`precision ${Const.PRECISION.DEFAULT} float;`); return copy; } } - else + else { if (src.substring(0,9) !== 'precision') { - return 'precision ' + Const.PRECISION.DEFAULT + ' float;\n' + src; + return `precision ${Const.PRECISION.DEFAULT} float;\n${src}`; } } return src; @@ -31,14 +31,13 @@ * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param vertexSrc {string|string[]} The vertex shader source as an array of strings. * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings. - * @param attributeLocations {Object} An attribute location map that lets you manually set the attribute locations. */ class Shader extends GLShader { - constructor(gl, vertexSrc, fragmentSrc, attributeLocations) + constructor(gl, vertexSrc, fragmentSrc) { - super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc, attributeLocations)); + super(gl, checkPrecision(vertexSrc), checkPrecision(fragmentSrc)); } } -export default Shader; \ No newline at end of file +export default Shader; diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index e16c135..79d7fc5 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -10,7 +10,7 @@ * @memberof PIXI */ class Bounds -{ +{ constructor() { /** @@ -58,7 +58,7 @@ /** * Can return Rectangle.EMPTY constant, either construct new rectangle, either use your rectangle * It is not guaranteed that it will return tempRect - * @param tempRect {PIXI.Rectangle} temporary object will be used if AABB is not empty + * @param rect {PIXI.Rectangle} temporary object will be used if AABB is not empty * @returns {PIXI.Rectangle} */ getRectangle(rect) @@ -142,8 +142,8 @@ */ addFrame(transform, x0, y0, x1, y1) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; let x = a * x0 + c * y0 + tx; @@ -189,15 +189,15 @@ */ addVertices(transform, vertices, beginOffset, endOffset) { - let matrix = transform.worldTransform; - let a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; + const matrix = transform.worldTransform; + const a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, tx = matrix.tx, ty = matrix.ty; let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; for (let i = beginOffset; i < endOffset; i += 2) { - let rawX = vertices[i], rawY = vertices[i + 1]; - let x = (a * rawX) + (c * rawY) + tx; - let y = (d * rawY) + (b * rawX) + ty; + const rawX = vertices[i], rawY = vertices[i + 1]; + const x = (a * rawX) + (c * rawY) + tx; + const y = (d * rawY) + (b * rawX) + ty; minX = x < minX ? x : minX; minY = y < minY ? y : minY; @@ -213,13 +213,13 @@ addBounds(bounds) { - let minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; + const minX = this.minX, minY = this.minY, maxX = this.maxX, maxY = this.maxY; this.minX = bounds.minX < minX ? bounds.minX : minX; this.minY = bounds.minY < minY ? bounds.minY : minY; this.maxX = bounds.maxX > maxX ? bounds.maxX : maxX; this.maxY = bounds.maxY > maxY ? bounds.maxY : maxY; } -} +} -export default Bounds; \ No newline at end of file +export default Bounds; diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d88a707..abad78d 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -14,7 +14,7 @@ * @memberof PIXI */ class Container extends DisplayObject -{ +{ constructor() { super(); @@ -44,7 +44,7 @@ */ addChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -124,8 +124,8 @@ return; } - let index1 = this.getChildIndex(child); - let index2 = this.getChildIndex(child2); + const index1 = this.getChildIndex(child); + const index2 = this.getChildIndex(child2); if (index1 < 0 || index2 < 0) { @@ -145,7 +145,7 @@ */ getChildIndex(child) { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { @@ -168,7 +168,7 @@ throw new Error('The supplied index is out of bounds'); } - let currentIndex = this.getChildIndex(child); + const currentIndex = this.getChildIndex(child); utils.removeItems(this.children, currentIndex, 1); // remove from old position this.children.splice(index, 0, child); //add at new position @@ -199,7 +199,7 @@ */ removeChild(child) { - let argumentsLength = arguments.length; + const argumentsLength = arguments.length; // if there is only one argument we can bypass looping through the them if(argumentsLength > 1) @@ -239,7 +239,7 @@ */ removeChildAt(index) { - let child = this.getChildAt(index); + const child = this.getChildAt(index); child.parent = null; utils.removeItems(this.children, index, 1); @@ -257,25 +257,25 @@ * @param [beginIndex=0] {number} The beginning position. * @param [endIndex=this.children.length] {number} The ending position. Default value is size of the container. */ - removeChildren(beginIndex, endIndex) + removeChildren(beginIndex=0, endIndex) { - let begin = beginIndex || 0; - let end = typeof endIndex === 'number' ? endIndex : this.children.length; - let range = end - begin; - let removed, i; + const begin = beginIndex; + const end = typeof endIndex === 'number' ? endIndex : this.children.length; + const range = end - begin; + let removed; if (range > 0 && range <= end) { removed = this.children.splice(begin, range); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].parent = null; } this.onChildrenChange(beginIndex); - for (i = 0; i < removed.length; ++i) + for (let i = 0; i < removed.length; ++i) { removed[i].emit('removed', this); } @@ -330,7 +330,7 @@ for (let i = 0; i < this.children.length; i++) { - let child = this.children[i]; + const child = this.children[i]; child.calculateBounds(); @@ -382,9 +382,8 @@ { renderer.currentRenderer.flush(); - let filters = this._filters; - let mask = this._mask; - let i, j; + const filters = this._filters; + const mask = this._mask; // push filter first as we need to ensure the stencil buffer is correct for any masking if ( filters ) @@ -396,7 +395,7 @@ this._enabledFilters.length = 0; - for (i = 0; i < filters.length; i++) + for (let i = 0; i < filters.length; i++) { if(filters[i].enabled) { @@ -421,7 +420,7 @@ this._renderWebGL(renderer); // now loop through the children and make sure they get rendered - for (i = 0, j = this.children.length; i < j; i++) + for (let i = 0, j = this.children.length; i < j; i++) { this.children[i].renderWebGL(renderer); } @@ -494,7 +493,7 @@ } /** - * Removes all internal references and listeners as well as removes children from the display list. + * Removes all internal references and listeners as well as removes children from the display list. * Do not use a Container after calling `destroy`. * @param [options] {object|boolean} Options parameter. A boolean will act as if all options have been set to that value * @param [options.children=false] {boolean} if set to true, all the children will have their destroy @@ -504,16 +503,16 @@ { super.destroy(); - let destroyChildren = typeof options === 'boolean' ? options : options && options.children; + const destroyChildren = typeof options === 'boolean' ? options : options && options.children; - let oldChildren = this.children; + const oldChildren = this.children; this.children = null; if (destroyChildren) { for (let i = oldChildren.length - 1; i >= 0; i--) { - let child = oldChildren[i]; + const child = oldChildren[i]; child.parent = null; child.destroy(options); } @@ -533,7 +532,7 @@ set width(value) { - let width = this.getLocalBounds().width; + const width = this.getLocalBounds().width; if (width !== 0) { @@ -561,7 +560,7 @@ set height(value) { - let height = this.getLocalBounds().height; + const height = this.getLocalBounds().height; if (height !== 0) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 15873a2..4c61c4b 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -21,7 +21,7 @@ { super(); - let TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; + const TransformClass = CONST.TRANSFORM_MODE.DEFAULT === CONST.TRANSFORM_MODE.STATIC ? TransformStatic : Transform; this.tempDisplayObjectParent = null; @@ -197,8 +197,8 @@ */ getLocalBounds(rect) { - let transformRef = this.transform; - let parentRef = this.parent; + const transformRef = this.transform; + const parentRef = this.parent; this.parent = null; this.transform = this._tempDisplayObjectParent.transform; @@ -213,7 +213,7 @@ rect = this._localBoundsRect; } - let bounds = this.getBounds(false, rect); + const bounds = this.getBounds(false, rect); this.parent = parentRef; this.transform = transformRef; @@ -225,9 +225,11 @@ * Calculates the global position of the display object * * @param position {PIXI.Point} The world origin to calculate from + * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate) + toGlobal(position, point, skipUpdate=false) { if(!skipUpdate) { @@ -258,6 +260,7 @@ * @param position {PIXI.Point} The world origin to calculate from * @param [from] {PIXI.DisplayObject} The DisplayObject to calculate the global position from * @param [point] {PIXI.Point} A Point object in which to store the value, optional (otherwise will create a new Point) + * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ toLocal(position, from, point, skipUpdate) @@ -341,17 +344,17 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) + setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) { - this.position.x = x || 0; - this.position.y = y || 0; + this.position.x = x; + this.position.y = y; this.scale.x = !scaleX ? 1 : scaleX; this.scale.y = !scaleY ? 1 : scaleY; - this.rotation = rotation || 0; - this.skew.x = skewX || 0; - this.skew.y = skewY || 0; - this.pivot.x = pivotX || 0; - this.pivot.y = pivotY || 0; + this.rotation = rotation; + this.skew.x = skewX; + this.skew.y = skewY; + this.pivot.x = pivotX; + this.pivot.y = pivotY; return this; } diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index 9065289..f104c27 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -72,7 +72,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -93,9 +93,9 @@ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; let a, b, c, d; a = this._cr * this.scale.x; @@ -124,7 +124,7 @@ /** * Decomposes a matrix and sets the transforms properties based on it. - * @param {PIXI.Matrix} The matrix to decompose + * @param matrix {PIXI.Matrix} The matrix to decompose */ setFromMatrix(matrix) { @@ -147,4 +147,4 @@ } } -export default Transform; \ No newline at end of file +export default Transform; diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index c680c22..9c250a8 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -8,7 +8,7 @@ * @memberof PIXI */ class TransformBase -{ +{ constructor() { /** @@ -19,7 +19,7 @@ this.worldTransform = new math.Matrix(); /** * The local matrix transform - * + * * @member {PIXI.Matrix} */ this.localTransform = new math.Matrix(); @@ -41,9 +41,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; // concat the parent matrix with the objects transform. wt.a = lt.a * pt.a + lt.b * pt.c; @@ -67,4 +67,4 @@ TransformBase.IDENTITY = new TransformBase(); -export default TransformBase; \ No newline at end of file +export default TransformBase; diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index c2d2fcc..cbc9813 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -9,7 +9,7 @@ * @memberof PIXI */ class TransformStatic extends TransformBase -{ +{ constructor() { super(); @@ -73,7 +73,7 @@ * Updates only local matrix */ updateLocalTransform() { - let lt = this.localTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. @@ -105,9 +105,9 @@ */ updateTransform(parentTransform) { - let pt = parentTransform.worldTransform; - let wt = this.worldTransform; - let lt = this.localTransform; + const pt = parentTransform.worldTransform; + const wt = this.worldTransform; + const lt = this.localTransform; if(this._localID !== this._currentLocalID) { @@ -176,4 +176,4 @@ } } -export default TransformStatic; \ No newline at end of file +export default TransformStatic; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index cadb190..b94c3b0 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -188,7 +188,7 @@ */ clone() { - let clone = new Graphics(); + const clone = new Graphics(); clone.renderable = this.renderable; clone.fillAlpha = this.fillAlpha; @@ -233,7 +233,7 @@ if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! - let shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); + const shape = new math.Polygon(this.currentPath.shape.points.slice(-2)); shape.closed = false; this.drawShape(shape); } @@ -258,7 +258,7 @@ */ moveTo(x, y) { - let shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x,y]); shape.closed = false; this.drawShape(shape); @@ -305,11 +305,9 @@ this.moveTo(0,0); } - - let xa, - ya, - n = 20, - points = this.currentPath.shape.points; + const n = 20; + const points = this.currentPath.shape.points; + let xa, ya; if (points.length === 0) { @@ -361,10 +359,10 @@ this.moveTo(0,0); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length-2]; + const fromY = points[points.length-1]; points.length -= 2; @@ -401,7 +399,7 @@ this.moveTo(x1, y1); } - let points = this.currentPath.shape.points, + const points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, @@ -419,7 +417,7 @@ } else { - let dd = a1 * a1 + b1 * b1, + const dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, @@ -454,9 +452,8 @@ * @param [anticlockwise=false] {boolean} Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - arc(cx, cy, radius, startAngle, endAngle, anticlockwise) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise=false) { - anticlockwise = anticlockwise || false; if (startAngle === endAngle) { @@ -472,16 +469,16 @@ startAngle += Math.PI * 2; } - let sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - let segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; if(sweep === 0) { return this; } - let startX = cx + Math.cos(startAngle) * radius; - let startY = cy + Math.sin(startAngle) * radius; + const startX = cx + Math.cos(startAngle) * radius; + const startY = cy + Math.sin(startAngle) * radius; if (this.currentPath) { @@ -492,27 +489,26 @@ this.moveTo(startX, startY); } - let points = this.currentPath.shape.points; + const points = this.currentPath.shape.points; - let theta = sweep/(segs*2); - let theta2 = theta*2; + const theta = sweep/(segs*2); + const theta2 = theta*2; - let cTheta = Math.cos(theta); - let sTheta = Math.sin(theta); + const cTheta = Math.cos(theta); + const sTheta = Math.sin(theta); - let segMinus = segs - 1; + const segMinus = segs - 1; - let remainder = ( segMinus % 1 ) / segMinus; + const remainder = ( segMinus % 1 ) / segMinus; for(let i=0; i<=segMinus; i++) { - let real = i + remainder * i; + const real = i + remainder * i; + const angle = ((theta) + startAngle + (theta2 * real)); - let angle = ((theta) + startAngle + (theta2 * real)); - - let c = Math.cos(angle); - let s = -Math.sin(angle); + const c = Math.cos(angle); + const s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); @@ -527,15 +523,15 @@ * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * - * @param color {number} the color of the fill - * @param alpha {number} the alpha of the fill + * @param [color=0] {number} the color of the fill + * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color, alpha) + beginFill(color=0, alpha=1) { this.filling = true; - this.fillColor = color || 0; - this.fillAlpha = (alpha === undefined) ? 1 : alpha; + this.fillColor = color; + this.fillAlpha = alpha; if (this.currentPath) { @@ -657,7 +653,7 @@ } } - let shape = new math.Polygon(points); + const shape = new math.Polygon(points); shape.closed = closed; this.drawShape(shape); @@ -720,18 +716,17 @@ _renderSpriteRect(renderer) { - let rect = this.graphicsData[0].shape; + const rect = this.graphicsData[0].shape; if(!this._spriteRect) { if(!Graphics._SPRITE_TEXTURE) { - let canvas = document.createElement('canvas'); - canvas.width = 10; - canvas.height = 10; - let context = canvas.getContext('2d'); - context.fillStyle = 'white'; - context.fillRect(0, 0, 10, 10); - Graphics._SPRITE_TEXTURE = Texture.fromCanvas(canvas); + Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); + + const currentRenderTarget = renderer._activeRenderTarget; + renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE); + renderer.clear([1,1,1,1]); + renderer.bindRenderTarget(currentRenderTarget); } this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); @@ -739,8 +734,8 @@ if (this.tint === 0xffffff) { this._spriteRect.tint = this.graphicsData[0].fillColor; } else { - let t1 = tempColor1; - let t2 = tempColor2; + const t1 = tempColor1; + const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); utils.hex2rgb(this.tint, t2); t1[0] *= t2[0]; @@ -801,7 +796,7 @@ this.cachedSpriteDirty = true; } - let lb = this._localBounds; + const lb = this._localBounds; this._bounds.addFrame(this.transform, lb.minX, lb.minY, lb.maxX, lb.maxY); } @@ -815,7 +810,7 @@ { this.worldTransform.applyInverse(point, tempPoint); - let graphicsData = this.graphicsData; + const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { @@ -857,9 +852,9 @@ for (let i = 0; i < this.graphicsData.length; i++) { - let data = this.graphicsData[i]; - let type = data.type; - let lineWidth = data.lineWidth; + const data = this.graphicsData[i]; + const type = data.type; + const lineWidth = data.lineWidth; shape = data.shape; if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) @@ -957,7 +952,7 @@ this.currentPath = null; - let data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + const data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); @@ -976,9 +971,9 @@ { resolution = resolution || 1; - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); + const canvasBuffer = new RenderTexture.create(bounds.width * resolution, bounds.height * resolution); if(!canvasRenderer) { @@ -990,7 +985,7 @@ canvasRenderer.render(this, canvasBuffer, false, tempMatrix); - let texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); + const texture = Texture.fromCanvas(canvasBuffer.baseTexture._canvasRenderTarget.canvas, scaleMode); texture.baseTexture.resolution = resolution; return texture; @@ -999,7 +994,7 @@ closePath() { // ok so close path assumes next one is a hole! - let currentPath = this.currentPath; + const currentPath = this.currentPath; if (currentPath && currentPath.shape) { currentPath.shape.close(); @@ -1010,7 +1005,7 @@ addHole() { // this is a hole! - let hole = this.graphicsData.pop(); + const hole = this.graphicsData.pop(); this.currentPath = this.graphicsData[this.graphicsData.length-1]; @@ -1054,4 +1049,4 @@ Graphics._SPRITE_TEXTURE = null; -export default Graphics; \ No newline at end of file +export default Graphics; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 3bd740a..6561054 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -36,11 +36,11 @@ */ render(graphics) { - let renderer = this.renderer; - let context = renderer.context; - let worldAlpha = graphics.worldAlpha; - let transform = graphics.transform.worldTransform; - let resolution = renderer.resolution; + const renderer = this.renderer; + const context = renderer.context; + const worldAlpha = graphics.worldAlpha; + const transform = graphics.transform.worldTransform; + const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. if (this._prevTint !== this.tint) { @@ -67,11 +67,11 @@ for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; - let fillColor = data._fillTint; - let lineColor = data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = data.lineWidth; @@ -142,15 +142,15 @@ { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; context.beginPath(); - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -181,13 +181,13 @@ } else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.beginPath(); @@ -230,16 +230,16 @@ { graphics._prevTint = graphics.tint; - let tintR = (graphics.tint >> 16 & 0xFF) / 255; - let tintG = (graphics.tint >> 8 & 0xFF) / 255; - let tintB = (graphics.tint & 0xFF)/ 255; + const tintR = (graphics.tint >> 16 & 0xFF) / 255; + const tintG = (graphics.tint >> 8 & 0xFF) / 255; + const tintB = (graphics.tint & 0xFF)/ 255; for (let i = 0; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; - let fillColor = data.fillColor | 0; - let lineColor = data.lineColor | 0; + const fillColor = data.fillColor | 0; + const lineColor = data.lineColor | 0; // super inline cos im an optimization NAZI :) data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) + (fillColor & 0xFF) / 255 * tintB*255); @@ -274,4 +274,4 @@ CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer); -export default CanvasGraphicsRenderer; \ No newline at end of file +export default CanvasGraphicsRenderer; diff --git a/src/core/graphics/utils/bezierCurveTo.js b/src/core/graphics/utils/bezierCurveTo.js index 456d07c..ffe59c1 100644 --- a/src/core/graphics/utils/bezierCurveTo.js +++ b/src/core/graphics/utils/bezierCurveTo.js @@ -13,15 +13,13 @@ * @param cpY2 {number} Second Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [path=number[]] Path array to push points into - * @return {PIXI.Graphics} + * @param [path=[]] {number[]} Path array to push points into + * @return {number[]} */ -const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path) +const bezierCurveTo = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY, path=[]) { - path = path || []; - - let n = 20, - dt, + const n = 20; + let dt, dt2, dt3, t2, @@ -29,9 +27,7 @@ path.push(fromX, fromY); - let j = 0; - - for (let i = 1; i <= n; ++i) + for (let i = 1, j=0; i <= n; ++i) { j = i / n; diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 5a65458..aef998f 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -69,8 +69,8 @@ */ render(graphics) { - let renderer = this.renderer; - let gl = renderer.gl; + const renderer = this.renderer; + const gl = renderer.gl; let webGLData; @@ -87,14 +87,14 @@ // This could be speeded up for sure! - let shader = this.primitiveShader; + const shader = this.primitiveShader; renderer.bindShader(shader); renderer.state.setBlendMode( graphics.blendMode ); for (let i = 0, n = webGL.data.length; i < n; i++) { webGLData = webGL.data[i]; - let shaderTemp = webGLData.shader; + const shaderTemp = webGLData.shader; renderer.bindShader(shaderTemp); shaderTemp.uniforms.translationMatrix = graphics.transform.worldTransform.toArray(true); @@ -115,7 +115,7 @@ */ updateGraphics(graphics) { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // get the contexts graphics object let webGL = graphics._webGL[this.CONTEXT_UID]; @@ -123,22 +123,20 @@ // if the graphics object does not exist in the webGL context time to create it! if (!webGL) { - webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl:gl, clearDirty:-1, dirty:-1}; + webGL = graphics._webGL[this.CONTEXT_UID] = {lastIndex:0, data:[], gl, clearDirty:-1, dirty:-1}; } // flag the graphics as not dirty as we are about to update it... webGL.dirty = graphics.dirty; - let i; - // if the user cleared the graphics object we will need to clear every object if (graphics.clearDirty !== webGL.clearDirty) { webGL.clearDirty = graphics.clearDirty; // loop through and return all the webGLDatas to the object pool so than can be reused later on - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { let graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); @@ -154,7 +152,7 @@ // loop through the graphics datas and construct each one.. // if the object is a complex fill then the new stencil buffer technique will be used // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { let data = graphics.graphicsData[i]; @@ -182,7 +180,7 @@ } // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) + for (let i = 0; i < webGL.data.length; i++) { webGLData = webGL.data[i]; @@ -218,4 +216,4 @@ WebGLRenderer.registerPlugin('graphics', GraphicsRenderer); -export default GraphicsRenderer; \ No newline at end of file +export default GraphicsRenderer; diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js index 8cf774c..0d1facc 100644 --- a/src/core/graphics/webgl/utils/buildCircle.js +++ b/src/core/graphics/webgl/utils/buildCircle.js @@ -15,9 +15,9 @@ const buildCircle = function (graphicsData, webGLData) { // need to convert points to a nice regular data - let circleData = graphicsData.shape; - let x = circleData.x; - let y = circleData.y; + const circleData = graphicsData.shape; + const x = circleData.x; + const y = circleData.y; let width; let height; @@ -33,28 +33,26 @@ height = circleData.height; } - let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); - let seg = (Math.PI * 2) / totalSegs ; - - let i = 0; + const totalSegs = Math.floor(30 * Math.sqrt(circleData.radius)) || Math.floor(15 * Math.sqrt(circleData.width + circleData.height)); + const seg = (Math.PI * 2) / totalSegs ; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; let vecPos = verts.length/6; indices.push(vecPos); - for (i = 0; i < totalSegs + 1 ; i++) + for (let i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); @@ -70,11 +68,11 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = []; - for (i = 0; i < totalSegs + 1; i++) + for (let i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height); @@ -86,4 +84,4 @@ } }; -export default buildCircle; \ No newline at end of file +export default buildCircle; diff --git a/src/core/graphics/webgl/utils/buildComplexPoly.js b/src/core/graphics/webgl/utils/buildComplexPoly.js index 68843eb..3057075 100644 --- a/src/core/graphics/webgl/utils/buildComplexPoly.js +++ b/src/core/graphics/webgl/utils/buildComplexPoly.js @@ -13,7 +13,7 @@ const buildComplexPoly = function (graphicsData, webGLData) { //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - let points = graphicsData.points.slice(); + const points = graphicsData.points.slice(); if (points.length < 6) { @@ -21,7 +21,7 @@ } // get first and last point.. figure out the middle! - let indices = webGLData.indices; + const indices = webGLData.indices; webGLData.points = points; webGLData.alpha = graphicsData.fillAlpha; webGLData.color = utils.hex2rgb(graphicsData.fillColor); @@ -57,11 +57,11 @@ // push a quad onto the end.. //TODO - this aint needed! - let length = points.length / 2; + const length = points.length / 2; for (let i = 0; i < length; i++) { indices.push( i ); } }; -export default buildComplexPoly; \ No newline at end of file +export default buildComplexPoly; diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index 9cebcec..df7160f 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -14,7 +14,6 @@ const buildLine = function (graphicsData, webGLData) { // TODO OPTIMISE! - let i = 0; let points = graphicsData.points; if (points.length === 0) @@ -32,7 +31,7 @@ // } // get first and last point.. figure out the middle! - let firstPoint = new math.Point(points[0], points[1]); + const firstPoint = new math.Point(points[0], points[1]); let lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); // if the first point is the last point - gonna have issues :) @@ -53,21 +52,21 @@ points.push(midPointX, midPointY); } - let verts = webGLData.points; - let indices = webGLData.indices; - let length = points.length / 2; + const verts = webGLData.points; + const indices = webGLData.indices; + const length = points.length / 2; let indexCount = points.length; let indexStart = verts.length/6; // DRAW the Line - let width = graphicsData.lineWidth / 2; + const width = graphicsData.lineWidth / 2; // sort color - let color = utils.hex2rgb(graphicsData.lineColor); - let alpha = graphicsData.lineAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; let px, py, p1x, p1y, p2x, p2y, p3x, p3y; let perpx, perpy, perp2x, perp2y, perp3x, perp3y; @@ -97,7 +96,7 @@ verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - for (i = 1; i < length-1; i++) + for (let i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; @@ -211,7 +210,7 @@ indices.push(indexStart); - for (i = 0; i < indexCount; i++) + for (let i = 0; i < indexCount; i++) { indices.push(indexStart++); } @@ -219,4 +218,4 @@ indices.push(indexStart-1); }; -export default buildLine; \ No newline at end of file +export default buildLine; diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index f23e6f4..1350093 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -25,7 +25,7 @@ let holes = graphicsData.holes; for (let i = 0; i < holes.length; i++) { - let hole = holes[i]; + const hole = holes[i]; holeArray.push(points.length/2); @@ -33,19 +33,19 @@ } // get first and last point.. figure out the middle! - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let length = points.length / 2; + const length = points.length / 2; // sort color - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let triangles = earcut(points, holeArray, 2); + const triangles = earcut(points, holeArray, 2); if (!triangles) { return; @@ -75,4 +75,4 @@ } }; -export default buildPoly; \ No newline at end of file +export default buildPoly; diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index b5f7929..4f2b93c 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -16,25 +16,25 @@ // --- // // need to convert points to a nice regular data // - let rectData = graphicsData.shape; - let x = rectData.x; - let y = rectData.y; - let width = rectData.width; - let height = rectData.height; + const rectData = graphicsData.shape; + const x = rectData.x; + const y = rectData.y; + const width = rectData.width; + const height = rectData.height; if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vertPos = verts.length/6; + const vertPos = verts.length/6; // start verts.push(x, y); @@ -70,4 +70,4 @@ } }; -export default buildRectangle; \ No newline at end of file +export default buildRectangle; diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 636e8f4..6c25bd9 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -14,15 +14,15 @@ */ let buildRoundedRectangle = function (graphicsData, webGLData) { - let rrectData = graphicsData.shape; - let x = rrectData.x; - let y = rrectData.y; - let width = rrectData.width; - let height = rrectData.height; + const rrectData = graphicsData.shape; + const x = rrectData.x; + const y = rrectData.y; + const width = rrectData.width; + const height = rrectData.height; - let radius = rrectData.radius; + const radius = rrectData.radius; - let recPoints = []; + const recPoints = []; recPoints.push(x, y + radius); quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints); quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints); @@ -34,22 +34,21 @@ if (graphicsData.fill) { - let color = utils.hex2rgb(graphicsData.fillColor); - let alpha = graphicsData.fillAlpha; + const color = utils.hex2rgb(graphicsData.fillColor); + const alpha = graphicsData.fillAlpha; - let r = color[0] * alpha; - let g = color[1] * alpha; - let b = color[2] * alpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; - let verts = webGLData.points; - let indices = webGLData.indices; + const verts = webGLData.points; + const indices = webGLData.indices; - let vecPos = verts.length/6; + const vecPos = verts.length/6; - let triangles = earcut(recPoints, null, 2); + const triangles = earcut(recPoints, null, 2); - let i = 0; - for (i = 0; i < triangles.length; i+=3) + for (let i = 0, j=triangles.length; i < j; i+=3) { indices.push(triangles[i] + vecPos); indices.push(triangles[i] + vecPos); @@ -58,7 +57,7 @@ indices.push(triangles[i+2] + vecPos); } - for (i = 0; i < recPoints.length; i++) + for (let i = 0, j = recPoints.length; i < j; i++) { verts.push(recPoints[i], recPoints[++i], r, g, b, alpha); } @@ -66,7 +65,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = recPoints; @@ -90,28 +89,28 @@ * @param cpY {number} Control point y * @param toX {number} Destination point x * @param toY {number} Destination point y - * @param [out] {number[]} The output array to add points into. If not passed, a new array is created. + * @param [out=[]] {number[]} The output array to add points into. If not passed, a new array is created. * @return {number[]} an array of points */ -let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out) +let quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { + const n = 20, + points = out; + let xa, ya, xb, yb, x, - y, - n = 20, - points = out || []; + y; function getPt(n1 , n2, perc) { - let diff = n2 - n1; + const diff = n2 - n1; return n1 + ( diff * perc ); } - let j = 0; - for (let i = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++ ) { j = i / n; // The Green Line diff --git a/src/core/index.js b/src/core/index.js index 122a2f3..6ab20c2 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -98,8 +98,8 @@ * the browser then this function will return a canvas renderer * * @memberof PIXI - * @param width=800 {number} the width of the renderers view - * @param height=600 {number} the height of the renderers view + * @param [width=800] {number} the width of the renderers view + * @param [height=600] {number} the height of the renderers view * @param [options] {object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {boolean} If the render view is transparent, default false @@ -111,10 +111,8 @@ * * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer */ - autoDetectRenderer: function (width, height, options, noWebGL) + autoDetectRenderer (width=800, height=600, options, noWebGL) { - width = width || 800; - height = height || 600; if (!noWebGL && core.utils.isWebGLSupported()) { @@ -125,4 +123,4 @@ } }); -export default core; \ No newline at end of file +export default core; diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 1cf7336..8409544 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -1,13 +1,13 @@ // Your friendly neighbour https://en.wikipedia.org/wiki/Dihedral_group of order 16 import Matrix from './Matrix'; -let ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; -let uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; -let vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; -let tempMatrices = []; +const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1]; +const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1]; +const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1]; +const tempMatrices = []; -let mul = []; +const mul = []; function signum(x) { if (x < 0) { @@ -21,13 +21,13 @@ function init() { for (let i = 0; i < 16; i++) { - let row = []; + const row = []; mul.push(row); for (let j = 0; j < 16; j++) { - let _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); - let _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); - let _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); - let _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); + const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]); + const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]); + const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]); + const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]); for (let k = 0; k < 16; k++) { if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) { row.push(k); @@ -38,7 +38,7 @@ } for (let i=0;i<16;i++) { - let mat = new Matrix(); + const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); } @@ -69,47 +69,31 @@ NE: 7, MIRROR_VERTICAL: 8, MIRROR_HORIZONTAL: 12, - uX: function (ind) { - return ux[ind]; - }, - uY: function (ind) { - return uy[ind]; - }, - vX: function (ind) { - return vx[ind]; - }, - vY: function (ind) { - return vy[ind]; - }, - inv: function (rotation) { + uX: ind => ux[ind], + uY: ind => uy[ind], + vX: ind => vx[ind], + vY: ind => vy[ind], + inv: rotation => { if (rotation & 8) { return rotation & 15; } return (-rotation) & 7; }, - add: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][rotationFirst]; - }, - sub: function (rotationSecond, rotationFirst) { - return mul[rotationSecond][GroupD8.inv(rotationFirst)]; - }, + add: (rotationSecond, rotationFirst) => mul[rotationSecond][rotationFirst], + sub: (rotationSecond, rotationFirst) => mul[rotationSecond][GroupD8.inv(rotationFirst)], /** * Adds 180 degrees to rotation. Commutative operation * @param rotation * @returns {number} */ - rotate180: function (rotation) { - return rotation ^ 4; - }, + rotate180: rotation => rotation ^ 4, /** * I dont know why sometimes width and heights needs to be swapped. We'll fix it later. * @param rotation * @returns {boolean} */ - isSwapWidthHeight: function(rotation) { - return (rotation & 3) === 2; - }, - byDirection: function (dx, dy) { + isSwapWidthHeight: rotation => (rotation & 3) === 2, + byDirection: (dx, dy) => { if (Math.abs(dx) * 2 <= Math.abs(dy)) { if (dy >= 0) { return GroupD8.S; @@ -148,9 +132,9 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: function (matrix, rotation, tx, ty) { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => { //Packer used "rotation", we use "inv(rotation)" - let mat = tempMatrices[GroupD8.inv(rotation)]; + const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; ty = ty || 0; mat.tx = tx; @@ -159,4 +143,4 @@ } }; -export default GroupD8; \ No newline at end of file +export default GroupD8; diff --git a/src/core/math/shapes/Circle.js b/src/core/math/shapes/Circle.js index c7baaf0..43fa3c9 100644 --- a/src/core/math/shapes/Circle.js +++ b/src/core/math/shapes/Circle.js @@ -6,31 +6,31 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of this circle - * @param y {number} The Y coordinate of the center of this circle - * @param radius {number} The radius of the circle + * @param [x=0] {number} The X coordinate of the center of this circle + * @param [y=0] {number} The Y coordinate of the center of this circle + * @param [radius=0] {number} The radius of the circle */ class Circle { - constructor(x, y, radius) + constructor(x=0, y=0, radius=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.radius = radius || 0; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -67,9 +67,9 @@ return false; } + const r2 = this.radius * this.radius; let dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; + dy = (this.y - y); dx *= dx; dy *= dy; @@ -88,4 +88,4 @@ } } -export default Circle; \ No newline at end of file +export default Circle; diff --git a/src/core/math/shapes/Ellipse.js b/src/core/math/shapes/Ellipse.js index b1d9fa4..fbd7fb7 100644 --- a/src/core/math/shapes/Ellipse.js +++ b/src/core/math/shapes/Ellipse.js @@ -6,38 +6,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the center of the ellipse - * @param y {number} The Y coordinate of the center of the ellipse - * @param width {number} The half width of this ellipse - * @param height {number} The half height of this ellipse + * @param [x=0] {number} The X coordinate of the center of the ellipse + * @param [y=0] {number} The Y coordinate of the center of the ellipse + * @param [width=0] {number} The half width of this ellipse + * @param [height=0] {number} The half height of this ellipse */ class Ellipse { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -95,4 +95,4 @@ } } -export default Ellipse; \ No newline at end of file +export default Ellipse; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index 6b376b3..b8ca33c 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -33,7 +33,7 @@ // if this is an array of points, convert it to a flat array of numbers if (points[0] instanceof Point) { - let p = []; + const p = []; for (let i = 0, il = points.length; i < il; i++) { p.push(points[i].x, points[i].y); @@ -98,11 +98,11 @@ // use some raycasting to test hits // https://github.com/substack/point-in-polygon/blob/master/index.js - let length = this.points.length / 2; + const length = this.points.length / 2; for (let i = 0, j = length - 1; i < length; j = i++) { - let xi = this.points[i * 2], yi = this.points[i * 2 + 1], + const xi = this.points[i * 2], yi = this.points[i * 2 + 1], xj = this.points[j * 2], yj = this.points[j * 2 + 1], intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); @@ -116,4 +116,4 @@ } } -export default Polygon; \ No newline at end of file +export default Polygon; diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index b68c351..596463e 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -5,38 +5,38 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rectangle - * @param width {number} The overall width of this rectangle - * @param height {number} The overall height of this rectangle + * @param [x=0] {number} The X coordinate of the upper-left corner of the rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rectangle + * @param [width=0] {number} The overall width of this rectangle + * @param [height=0] {number} The overall height of this rectangle */ class Rectangle { - constructor(x, y, width, height) + constructor(x=0, y=0, width=0, height=0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -80,50 +80,6 @@ } /** - * returns the left edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle# - */ - get left () - { - return this.x; - } - - /** - * returns the right edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get right() - { - return this.x + this.width; - } - - /** - * returns the top edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get top () - { - return this.y; - } - - /** - * returns the bottom edge of the rectangle - * - * @member {number} - * @memberof PIXI.Rectangle - */ - get bottom() - { - return this.y + this.height; - } - - /** * Checks whether the x and y coordinates given are contained within this Rectangle * * @param x {number} The X coordinate of the point to test @@ -217,4 +173,4 @@ } } -export default Rectangle; \ No newline at end of file +export default Rectangle; diff --git a/src/core/math/shapes/RoundedRectangle.js b/src/core/math/shapes/RoundedRectangle.js index 043ea2c..6d424cc 100644 --- a/src/core/math/shapes/RoundedRectangle.js +++ b/src/core/math/shapes/RoundedRectangle.js @@ -5,45 +5,45 @@ * * @class * @memberof PIXI - * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle - * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle - * @param width {number} The overall width of this rounded rectangle - * @param height {number} The overall height of this rounded rectangle - * @param radius {number} Controls the radius of the rounded corners + * @param [x=0] {number} The X coordinate of the upper-left corner of the rounded rectangle + * @param [y=0] {number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param [width=0] {number} The overall width of this rounded rectangle + * @param [height=0] {number} The overall height of this rounded rectangle + * @param [radius=20] {number} Controls the radius of the rounded corners */ class RoundedRectangle { - constructor(x, y, width, height, radius) + constructor(x=0, y=0, width=0, height=0, radius=20) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; /** * @member {number} * @default 0 */ - this.width = width || 0; + this.width = width; /** * @member {number} * @default 0 */ - this.height = height || 0; + this.height = height; /** * @member {number} * @default 20 */ - this.radius = radius || 20; + this.radius = radius; /** * The type of the object, mainly used to avoid `instanceof` checks @@ -92,4 +92,4 @@ } } -export default RoundedRectangle; \ No newline at end of file +export default RoundedRectangle; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index acbfa3a..1c7588c 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -212,9 +212,9 @@ */ generateTexture(displayObject, scaleMode, resolution) { - let bounds = displayObject.getLocalBounds(); + const bounds = displayObject.getLocalBounds(); - let renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); tempMatrix.tx = -bounds.x; tempMatrix.ty = -bounds.y; @@ -282,4 +282,4 @@ } } -export default SystemRenderer; \ No newline at end of file +export default SystemRenderer; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 43e9bc0..b7d60e0 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,9 +26,8 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('Canvas', width, height, options); @@ -137,7 +136,7 @@ this.resolution = this.rootResolution; } - let context = this.context; + const context = this.context; if(!renderTexture) { @@ -145,13 +144,11 @@ } - - if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; - let tempWt = this._tempDisplayObjectParent.transform.worldTransform; + const cacheParent = displayObject.parent; + const tempWt = this._tempDisplayObjectParent.transform.worldTransform; if(transform) { @@ -195,7 +192,7 @@ } // TODO RENDER TARGET STUFF HERE.. - let tempContext = this.context; + const tempContext = this.context; this.context = context; displayObject.renderCanvas(this); @@ -259,4 +256,4 @@ utils.pluginTarget.mixin(CanvasRenderer); -export default CanvasRenderer; \ No newline at end of file +export default CanvasRenderer; diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index c0101ae..3deb1ce 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -20,13 +20,13 @@ */ pushMask(maskData) { - let renderer = this.renderer; + const renderer = this.renderer; renderer.context.save(); - let cacheAlpha = maskData.alpha; - let transform = maskData.transform.worldTransform; - let resolution = renderer.resolution; + const cacheAlpha = maskData.alpha; + const transform = maskData.transform.worldTransform; + const resolution = renderer.resolution; renderer.context.setTransform( transform.a * resolution, @@ -50,8 +50,8 @@ renderGraphicsShape(graphics) { - let context = this.renderer.context; - let len = graphics.graphicsData.length; + const context = this.renderer.context; + const len = graphics.graphicsData.length; if (len === 0) { @@ -62,13 +62,13 @@ for (let i = 0; i < len; i++) { - let data = graphics.graphicsData[i]; - let shape = data.shape; + const data = graphics.graphicsData[i]; + const shape = data.shape; if (data.type === CONST.SHAPES.POLY) { - let points = shape.points; + const points = shape.points; context.moveTo(points[0], points[1]); @@ -100,13 +100,13 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - let w = shape.width * 2; - let h = shape.height * 2; + const w = shape.width * 2; + const h = shape.height * 2; - let x = shape.x - w/2; - let y = shape.y - h/2; + const x = shape.x - w/2; + const y = shape.y - h/2; - let kappa = 0.5522848, + const kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -124,13 +124,13 @@ else if (data.type === CONST.SHAPES.RREC) { - let rx = shape.x; - let ry = shape.y; - let width = shape.width; - let height = shape.height; + const rx = shape.x; + const ry = shape.y; + const width = shape.width; + const height = shape.height; let radius = shape.radius; - let maxRadius = Math.min(width, height) / 2 | 0; + const maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; context.moveTo(rx, ry + radius); @@ -160,4 +160,4 @@ destroy() {} } -export default CanvasMaskManager; \ No newline at end of file +export default CanvasMaskManager; diff --git a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js index 8ceeb88..0d93fea 100644 --- a/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js +++ b/src/core/renderers/canvas/utils/canUseNewCanvasBlendModes.js @@ -6,11 +6,11 @@ */ const createColoredCanvas = function(color) { - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.fillStyle = color; context.fillRect(0,0,6,1); return canvas; @@ -29,28 +29,28 @@ return false; } - let magenta = createColoredCanvas('#ff00ff'); - let yellow = createColoredCanvas('#ffff00'); + const magenta = createColoredCanvas('#ff00ff'); + const yellow = createColoredCanvas('#ffff00'); - let canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 6; canvas.height = 1; - let context = canvas.getContext('2d'); + const context = canvas.getContext('2d'); context.globalCompositeOperation = 'multiply'; context.drawImage(magenta, 0, 0); context.drawImage(yellow, 2, 0); - let imageData = context.getImageData(2,0,1,1); + const imageData = context.getImageData(2,0,1,1); if (!imageData) { return false; } - let data = imageData.data; + const data = imageData.data; return (data[0] === 255 && data[1] === 0 && data[2] === 0); }; -export default canUseNewCanvasBlendModes; \ No newline at end of file +export default canUseNewCanvasBlendModes; diff --git a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js index 88c2c01..49b6d0a 100644 --- a/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js +++ b/src/core/renderers/canvas/utils/mapCanvasBlendModesToPixi.js @@ -5,12 +5,10 @@ * Maps blend combinations to Canvas * @class * @memberof PIXI - * @param array + * @param [array=[]] {array} */ -function mapCanvasBlendModesToPixi(array) +function mapCanvasBlendModesToPixi(array=[]) { - array = array || []; - if (canUseNewCanvasBlendModes()) { array[CONST.BLEND_MODES.NORMAL] = 'source-over'; @@ -56,4 +54,4 @@ return array; } -export default mapCanvasBlendModesToPixi; \ No newline at end of file +export default mapCanvasBlendModesToPixi; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 94bcc93..68ac685 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -51,12 +51,11 @@ */ run() { - let tm = this.renderer.textureManager; - let managedTextures = tm._managedTextures; + const tm = this.renderer.textureManager; + const managedTextures = tm._managedTextures; let wasRemoved = false; - let i,j; - for (i = 0; i < managedTextures.length; i++) + for (let i = 0; i < managedTextures.length; i++) { let texture = managedTextures[i]; @@ -71,9 +70,8 @@ if (wasRemoved) { - j = 0; - - for (i = 0; i < managedTextures.length; i++) + let j=0; + for (let i = 0; i < managedTextures.length; i++) { if (managedTextures[i] !== null) { @@ -92,7 +90,7 @@ */ unload( displayObject ) { - let tm = this.renderer.textureManager; + const tm = this.renderer.textureManager; if(displayObject._texture) { @@ -107,4 +105,4 @@ } } -export default TextureGarbageCollector; \ No newline at end of file +export default TextureGarbageCollector; diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 01af257..3286672 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -55,7 +55,7 @@ { texture = texture.baseTexture || texture; - let isRenderTexture = !!texture._glRenderTargets; + const isRenderTexture = !!texture._glRenderTargets; if (!texture.hasLoaded) { @@ -68,7 +68,7 @@ { if(isRenderTexture) { - let renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); + const renderTarget = new RenderTarget(this.gl, texture.width, texture.height, texture.scaleMode, texture.resolution); renderTarget.resize(texture.width, texture.height); texture._glRenderTargets[this.renderer.CONTEXT_UID] = renderTarget; glTexture = renderTarget.texture; @@ -163,7 +163,7 @@ if (!skipRemove) { - let i = this._managedTextures.indexOf(texture); + const i = this._managedTextures.indexOf(texture); if (i !== -1) { utils.removeItems(this._managedTextures, i, 1); } @@ -179,7 +179,7 @@ // empty all the old gl textures as they are useless now for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; if (texture._glTextures[this.renderer.CONTEXT_UID]) { delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -195,7 +195,7 @@ // destroy managed textures for (let i = 0; i < this._managedTextures.length; ++i) { - let texture = this._managedTextures[i]; + const texture = this._managedTextures[i]; this.destroyTexture(texture, true); texture.off('update', this.updateTexture, this); texture.off('dispose', this.destroyTexture, this); @@ -205,4 +205,4 @@ } } -export default TextureManager; \ No newline at end of file +export default TextureManager; diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index a88f8aa..fb9a165 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -42,9 +42,8 @@ */ class WebGLRenderer extends SystemRenderer { - constructor(width, height, options) + constructor(width, height, options={}) { - options = options || {}; super('WebGL', width, height, options); /** @@ -173,7 +172,7 @@ */ _initContext() { - let gl = this.gl; + const gl = this.gl; // create a texture manager... this.textureManager = new TextureManager(this); @@ -225,7 +224,7 @@ if(!skipUpdateTransform) { // update the scene graph - let cacheParent = displayObject.parent; + const cacheParent = displayObject.parent; displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; @@ -348,8 +347,8 @@ if(renderTexture) { - let baseTexture = renderTexture.baseTexture; - let gl = this.gl; + const baseTexture = renderTexture.baseTexture; + const gl = this.gl; if(!baseTexture._glRenderTargets[this.CONTEXT_UID]) { @@ -430,14 +429,13 @@ * @param texture {PIXI.Texture} the new texture * @param location {number} the texture location */ - bindTexture(texture, location) + bindTexture(texture, location=0) { texture = texture.baseTexture || texture; - let gl = this.gl; + const gl = this.gl; //TODO test perf of cache? - location = location || 0; if(this._activeTextureLocation !== location)// { @@ -559,4 +557,4 @@ utils.pluginTarget.mixin(WebGLRenderer); -export default WebGLRenderer; \ No newline at end of file +export default WebGLRenderer; diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index beffc3b..3e695de 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -1,6 +1,6 @@ import mapWebGLBlendModesToPixi from './utils/mapWebGLBlendModesToPixi'; -let BLEND = 0, +const BLEND = 0, DEPTH_TEST = 1, FRONT_FACE = 2, CULL_FACE = 3, @@ -98,7 +98,7 @@ */ pop() { - let state = this.stack[--this.stackIndex]; + const state = this.stack[--this.stackIndex]; this.setState(state); } @@ -124,19 +124,8 @@ if(this.activeState[BLEND] === value|0) { return; } - this.activeState[BLEND] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.BLEND); - } - else - { - gl.disable(gl.BLEND); - } + this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } /** @@ -165,17 +154,7 @@ } this.activeState[DEPTH_TEST] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.DEPTH_TEST); - } - else - { - gl.disable(gl.DEPTH_TEST); - } + this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } /** @@ -189,17 +168,7 @@ } this.activeState[CULL_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.enable(gl.CULL_FACE); - } - else - { - gl.disable(gl.CULL_FACE); - } + this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } /** @@ -213,17 +182,7 @@ } this.activeState[FRONT_FACE] = value|0; - - let gl = this.gl; - - if(value) - { - gl.frontFace(gl.CW); - } - else - { - gl.frontFace(gl.CCW); - } + this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } /** @@ -231,22 +190,19 @@ */ resetAttributes() { - let i; - for ( i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) { this.attribState.tempAttribState[i] = 0; } - for ( i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) { this.attribState.attribState[i] = 0; } - let gl = this.gl; - // im going to assume one is always active for performance reasons. - for (i = 1; i < this.maxAttribs; i++) + for (let i = 1; i < this.maxAttribs; i++) { - gl.disableVertexAttribArray(i); + this.gl.disableVertexAttribArray(i); } } @@ -273,7 +229,7 @@ this.activeState[i] = 32; } - let gl = this.gl; + const gl = this.gl; gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); @@ -281,4 +237,4 @@ } } -export default WebGLState; \ No newline at end of file +export default WebGLState; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 471b2aa..80276b3 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -1,11 +1,11 @@ import glCore from 'pixi-gl-core'; -let defaultValue = glCore.shader.defaultValue; +const defaultValue = glCore.shader.defaultValue; function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { - let vertUniforms = extractUniformsFromString(vertexSrc, mask); - let fragUniforms = extractUniformsFromString(fragmentSrc, mask); + const vertUniforms = extractUniformsFromString(vertexSrc, mask); + const fragUniforms = extractUniformsFromString(fragmentSrc, mask); return Object.assign(vertUniforms, fragUniforms); } @@ -13,15 +13,15 @@ function extractUniformsFromString(string) { - let maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); + const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea)$'); - let uniforms = {}; + const uniforms = {}; let nameSplit; // clean the lines a little - remove extra spaces / teabs etc // then split along ';' - let lines = string.replace(/\s+/g,' ') + const lines = string.replace(/\s+/g,' ') .split(/\s*;\s*/); // loop through.. @@ -31,8 +31,8 @@ if(line.indexOf('uniform') > -1) { - let splitLine = line.split(' '); - let type = splitLine[1]; + const splitLine = line.split(' '); + const type = splitLine[1]; let name = splitLine[2]; let size = 1; @@ -49,8 +49,8 @@ { uniforms[name] = { value:defaultValue(type, size), - name:name, - type:type + name, + type }; } } @@ -59,4 +59,4 @@ return uniforms; } -export default extractUniformsFromSrc; \ No newline at end of file +export default extractUniformsFromSrc; diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index 941d1ed..b51fabf 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -14,7 +14,7 @@ // let texture = {width:1136, height:700};//sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -26,7 +26,7 @@ const calculateNormalizedScreenSpaceMatrix = function (outputMatrix, filterArea, textureSize) { - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); @@ -41,21 +41,21 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite const calculateSpriteMatrix = function (outputMatrix, filterArea, textureSize, sprite) { - let worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), + const worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX), texture = sprite._texture.baseTexture; // TODO unwrap? - let mappedMatrix = outputMatrix.identity(); + const mappedMatrix = outputMatrix.identity(); // scale.. - let ratio = textureSize.height / textureSize.width; + const ratio = textureSize.height / textureSize.width; mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); mappedMatrix.scale(1 , ratio); - let translateScaleX = (textureSize.width / texture.width); - let translateScaleY = (textureSize.height / texture.height); + const translateScaleX = (textureSize.width / texture.width); + const translateScaleY = (textureSize.height / texture.height); worldTransform.tx /= texture.width * translateScaleX; @@ -80,4 +80,4 @@ calculateScreenSpaceMatrix, calculateNormalizedScreenSpaceMatrix, calculateSpriteMatrix -}; \ No newline at end of file +}; diff --git a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js index b2c5f8a..9494aec 100644 --- a/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js +++ b/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js @@ -16,7 +16,7 @@ { constructor(sprite) { - let maskMatrix = new math.Matrix(); + const maskMatrix = new math.Matrix(); super( glslify('./spriteMaskFilter.vert'), @@ -38,7 +38,7 @@ */ apply(filterManager, input, output) { - let maskSprite = this.maskSprite; + const maskSprite = this.maskSprite; this.uniforms.mask = maskSprite._texture; this.uniforms.otherMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, maskSprite ); @@ -48,4 +48,4 @@ } } -export default SpriteMaskFilter; \ No newline at end of file +export default SpriteMaskFilter; diff --git a/src/core/renderers/webgl/managers/BlendModeManager.js b/src/core/renderers/webgl/managers/BlendModeManager.js index 108ea68..4e6e8d2 100644 --- a/src/core/renderers/webgl/managers/BlendModeManager.js +++ b/src/core/renderers/webgl/managers/BlendModeManager.js @@ -33,11 +33,11 @@ this.currentBlendMode = blendMode; - let mode = this.renderer.blendModes[this.currentBlendMode]; + const mode = this.renderer.blendModes[this.currentBlendMode]; this.renderer.gl.blendFunc(mode[0], mode[1]); return true; } } -export default BlendModeManager; \ No newline at end of file +export default BlendModeManager; diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 2dc3047..e058ebf 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -44,7 +44,7 @@ pushFilter(target, filters) { - let renderer = this.renderer; + const renderer = this.renderer; let filterData = this.filterData; @@ -53,7 +53,7 @@ filterData = this.renderer._activeRenderTarget.filterStack; // add new stack - let filterState = new FilterState(); + const filterState = new FilterState(); filterState.sourceFrame = filterState.destinationFrame = this.renderer._activeRenderTarget.size; filterState.renderTarget = renderer._activeRenderTarget; @@ -73,34 +73,40 @@ } // for now we go off the filter of the first resolution.. - let resolution = filters[0].resolution; - let padding = filters[0].padding | 0; - let targetBounds = target.filterArea || target.getBounds(true); - let sourceFrame = currentState.sourceFrame; - let destinationFrame = currentState.destinationFrame; + const resolution = filters[0].resolution; + const padding = filters[0].padding | 0; + const targetBounds = target.filterArea || target.getBounds(true); + const sourceFrame = currentState.sourceFrame; + const destinationFrame = currentState.destinationFrame; sourceFrame.x = ((targetBounds.x * resolution) | 0) / resolution; sourceFrame.y = ((targetBounds.y * resolution) | 0) / resolution; sourceFrame.width = ((targetBounds.width * resolution) | 0) / resolution; sourceFrame.height = ((targetBounds.height * resolution) | 0) / resolution; - // lets pplay the padding After we fit the element to the screen. - // this should stop the strange side effects that can occour when cropping to the edges - sourceFrame.pad(padding); - - if(!filterData.stack[0].renderTarget.transform) - { - sourceFrame.fit(filterData.stack[0].destinationFrame); - } - // lets pplay the padding After we fit the element to the screen. // this should stop the strange side effects that can occour when cropping to the edges sourceFrame.pad(padding); + if(filterData.stack[0].renderTarget.transform) + {// + + // TODO we should fit the rect around the transform.. + } + else + { + + sourceFrame.fit(filterData.stack[0].destinationFrame); + } + + destinationFrame.width = sourceFrame.width; destinationFrame.height = sourceFrame.height; - let renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); + // lets play the padding after we fit the element to the screen. + // this should stop the strange side effects that can occour when cropping to the edges + + const renderTarget = this.getPotRenderTarget(renderer.gl, sourceFrame.width, sourceFrame.height, resolution); currentState.target = target; currentState.filters = filters; @@ -119,14 +125,14 @@ popFilter() { - let filterData = this.filterData; + const filterData = this.filterData; - let lastState = filterData.stack[filterData.index-1]; - let currentState = filterData.stack[filterData.index]; + const lastState = filterData.stack[filterData.index-1]; + const currentState = filterData.stack[filterData.index]; this.quad.map(currentState.renderTarget.size, currentState.sourceFrame).upload(); - let filters = currentState.filters; + const filters = currentState.filters; if(filters.length === 1) { @@ -139,9 +145,8 @@ let flop = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, 1); flop.setFrame(currentState.destinationFrame, currentState.sourceFrame); - let i; - - for (i = 0; i < filters.length-1; i++) + let i=0; + for (i; i < filters.length-1; i++) { filters[i].apply(this, flip, flop, true); @@ -149,7 +154,6 @@ flip = flop; flop = t; } - filters[i].apply(this, flip, lastState.renderTarget, false); this.freePotRenderTarget(flip); @@ -166,7 +170,7 @@ applyFilter(filter, input, output, clear) { - let renderer = this.renderer; + const renderer = this.renderer; let shader = filter.glShaders[renderer.CONTEXT_UID]; // cacheing.. @@ -196,7 +200,7 @@ if(clear) { - let gl = renderer.gl; + const gl = renderer.gl; gl.disable(gl.SCISSOR_TEST); renderer.clear();//[1, 1, 1, 1]); @@ -227,8 +231,8 @@ // this returns a matrix that will normalise map filter cords in the filter to screen space syncUniforms(shader, filter) { - let uniformData = filter.uniformData; - let uniforms = filter.uniforms; + const uniformData = filter.uniformData; + const uniforms = filter.uniforms; // 0 is reserverd for the pixi texture so we start at 1! let textureCount = 1; @@ -280,7 +284,7 @@ // Although thinking about it, we could probably // make the filter texture cache return a RenderTexture // rather than a renderTarget - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.renderer._activeTextureLocation = gl.TEXTURE0 + textureCount; gl.activeTexture(gl.TEXTURE0 + textureCount ); uniforms[i].texture.bind(); @@ -332,8 +336,8 @@ getRenderTarget(clear, resolution) { - let currentState = this.filterData.stack[this.filterData.index]; - let renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); + const currentState = this.filterData.stack[this.filterData.index]; + const renderTarget = this.getPotRenderTarget(this.renderer.gl, currentState.sourceFrame.width, currentState.sourceFrame.height, resolution || currentState.resolution); renderTarget.setFrame(currentState.destinationFrame, currentState.sourceFrame); return renderTarget; @@ -354,7 +358,7 @@ // thia returns a matrix that will normalise map filter cords in the filter to screen space calculateScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size); } @@ -365,7 +369,7 @@ */ calculateNormalizedScreenSpaceMatrix(outputMatrix) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateNormalizedScreenSpaceMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, currentState.destinationFrame); } @@ -373,7 +377,7 @@ // this will map the filter coord so that a texture can be used based on the transform of a sprite calculateSpriteMatrix(outputMatrix, sprite) { - let currentState = this.filterData.stack[this.filterData.index]; + const currentState = this.filterData.stack[this.filterData.index]; return filterTransforms.calculateSpriteMatrix(outputMatrix, currentState.sourceFrame, currentState.renderTarget.size, sprite); } @@ -393,13 +397,13 @@ minWidth = bitTwiddle.nextPow2(minWidth * resolution); minHeight = bitTwiddle.nextPow2(minHeight * resolution); - let key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); if(!this.pool[key]) { this.pool[key] = []; } - let renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); + const renderTarget = this.pool[key].pop() || new RenderTarget(gl, minWidth, minHeight, null, 1); //manually tweak the resolution... //this will not modify the size of the frame buffer, just its resolution. @@ -428,10 +432,10 @@ freePotRenderTarget(renderTarget) { - let minWidth = renderTarget.size.width * renderTarget.resolution; - let minHeight = renderTarget.size.height * renderTarget.resolution; + const minWidth = renderTarget.size.width * renderTarget.resolution; + const minHeight = renderTarget.size.height * renderTarget.resolution; - let key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); + const key = ((minWidth & 0xFFFF) << 16) | (minHeight & 0xFFFF); this.pool[key].push(renderTarget); } } diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index d4a1f0a..1b9b6db 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -39,7 +39,7 @@ { if(this.enableScissor && !this.scissor && !this.renderer.stencilManager.stencilMaskStack.length && maskData.isFastRect()) { - let matrix = maskData.worldTransform; + const matrix = maskData.worldTransform; let rot = Math.atan2(matrix.b, matrix.a); @@ -155,9 +155,9 @@ { maskData.renderable = true; - let renderTarget = this.renderer._activeRenderTarget; + const renderTarget = this.renderer._activeRenderTarget; - let bounds = maskData.getBounds(); + const bounds = maskData.getBounds(); bounds.fit(renderTarget.size); maskData.renderable = false; @@ -186,9 +186,9 @@ this.scissor = false; // must be scissor! - let gl = this.renderer.gl; + const gl = this.renderer.gl; gl.disable(gl.SCISSOR_TEST); } } -export default MaskManager; \ No newline at end of file +export default MaskManager; diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 343c851..04cd196 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -22,7 +22,7 @@ { this.stencilMaskStack = stencilMaskStack; - let gl = this.renderer.gl; + const gl = this.renderer.gl; if (stencilMaskStack.length === 0) { @@ -45,7 +45,7 @@ this.renderer._activeRenderTarget.attachStencilBuffer(); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; if (sms.length === 0) @@ -74,10 +74,10 @@ { this.renderer.setObjectRenderer(this.renderer.plugins.graphics); - let gl = this.renderer.gl, + const gl = this.renderer.gl, sms = this.stencilMaskStack; - let graphics = sms.pop(); + const graphics = sms.pop(); if (sms.length === 0) { @@ -109,4 +109,4 @@ } } -export default StencilManager; \ No newline at end of file +export default StencilManager; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 4adc307..cb631ea 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -172,7 +172,7 @@ */ clear(clearColor) { - let cc = clearColor || this.clearColor; + const cc = clearColor || this.clearColor; this.frameBuffer.clear(cc[0],cc[1],cc[2],cc[3]);//r,g,b,a); } @@ -206,7 +206,7 @@ activate() { //TOOD refactor usage of frame.. - let gl = this.gl; + const gl = this.gl; // make surethe texture is unbound! this.frameBuffer.bind(); @@ -244,7 +244,7 @@ */ calculateProjection(destinationFrame, sourceFrame) { - let pm = this.projectionMatrix; + const pm = this.projectionMatrix; sourceFrame = sourceFrame || destinationFrame; @@ -313,4 +313,4 @@ } } -export default RenderTarget; \ No newline at end of file +export default RenderTarget; diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index e07892a..0096d21 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -11,7 +11,7 @@ const checkMaxIfStatmentsInShader = function(maxIfs, gl) { - let createTempContext = !gl; + const createTempContext = !gl; if(createTempContext) { @@ -22,11 +22,11 @@ gl = glCore.createContext(tinyCanvas); } - let shader = gl.createShader(gl.FRAGMENT_SHADER); + const shader = gl.createShader(gl.FRAGMENT_SHADER); while(true) // eslint-disable-line no-constant-condition { - let fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); + const fragmentSrc = fragTemplate.replace(/%forloop%/gi, generateIfTestSrc(maxIfs)); gl.shaderSource(shader, fragmentSrc); gl.compileShader(shader); @@ -68,11 +68,11 @@ if(i < maxIfs-1) { - src += 'if(test == ' + i + '.0){}'; + src += `if(test == ${i}.0){}`; } } return src; } -export default checkMaxIfStatmentsInShader; \ No newline at end of file +export default checkMaxIfStatmentsInShader; diff --git a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js index f0c69c0..cd0d884 100644 --- a/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js @@ -5,12 +5,11 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param array + * @param [array=[]] {array} + * @return {array} */ -function mapWebGLBlendModesToPixi(gl, array) +function mapWebGLBlendModesToPixi(gl, array=[]) { - array = array || []; - //TODO - premultiply alpha would be different. //add a boolean for that! array[CONST.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; diff --git a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js index 3c54628..cef36f2 100644 --- a/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js +++ b/src/core/renderers/webgl/utils/mapWebGLDrawModesToPixi.js @@ -5,12 +5,10 @@ * @class * @memberof PIXI * @param gl {WebGLRenderingContext} The current WebGL drawing context - * @param object + * @param [object={}] {object} */ -function mapWebGLDrawModesToPixi(gl, object) +function mapWebGLDrawModesToPixi(gl, object={}) { - object= object || {}; - object[CONST.DRAW_MODES.POINTS] = gl.POINTS; object[CONST.DRAW_MODES.LINES] = gl.LINES; object[CONST.DRAW_MODES.LINE_LOOP] = gl.LINE_LOOP; @@ -20,4 +18,4 @@ object[CONST.DRAW_MODES.TRIANGLE_FAN] = gl.TRIANGLE_FAN; } -export default mapWebGLDrawModesToPixi; \ No newline at end of file +export default mapWebGLDrawModesToPixi; diff --git a/src/core/renderers/webgl/utils/validateContext.js b/src/core/renderers/webgl/utils/validateContext.js index 34d4c88..231bc97 100644 --- a/src/core/renderers/webgl/utils/validateContext.js +++ b/src/core/renderers/webgl/utils/validateContext.js @@ -1,6 +1,6 @@ function validateContext(gl) { - let attributes = gl.getContextAttributes(); + const attributes = gl.getContextAttributes(); // this is going to be fairly simple for now.. but at least we have rom to grow! if(!attributes.stencil) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 356b45a..f33d93c 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -155,13 +155,14 @@ // set the vertex data - let texture = this._texture, + const texture = this._texture, wt = this.transform.worldTransform, a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, vertexData = this.vertexData, - w0, w1, h0, h1, trim = texture.trim, orig = texture.orig; + let w0, w1, h0, h1; + if (trim) { @@ -216,9 +217,9 @@ orig = texture.orig; // lets calculate the new untrimmed bounds.. - let wt = this.transform.worldTransform, - a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty, - w0, w1, h0, h1; + const wt = this.transform.worldTransform, + a = wt.a, b = wt.b, c = wt.c, d = wt.d, tx = wt.tx, ty = wt.ty; + let w0, w1, h0, h1; w0 = (orig.width ) * (1-this.anchor._x); w1 = (orig.width ) * -this.anchor._x; @@ -273,7 +274,7 @@ _calculateBounds() { - let trim = this._texture.trim, + const trim = this._texture.trim, orig = this._texture.orig; //First lets check to see if the current texture has a trim.. @@ -336,9 +337,9 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._texture.orig.width; - let height = this._texture.orig.height; - let x1 = -width * this.anchor.x; + const width = this._texture.orig.width; + const height = this._texture.orig.height; + const x1 = -width * this.anchor.x; let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) @@ -370,10 +371,10 @@ this.anchor = null; - let destroyTexture = typeof options === 'boolean' ? options : options && options.texture; + const destroyTexture = typeof options === 'boolean' ? options : options && options.texture; if (destroyTexture) { - let destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; + const destroyBaseTexture = typeof options === 'boolean' ? options : options && options.baseTexture; this._texture.destroy(!!destroyBaseTexture); } @@ -406,11 +407,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return new Sprite(texture); @@ -443,7 +444,7 @@ } set width(value) { - let sign = utils.sign(this.scale.x) || 1; + const sign = utils.sign(this.scale.x) || 1; this.scale.x = sign * value / this.texture.orig.width; this._width = value; } @@ -460,7 +461,7 @@ } set height(value) { - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -512,4 +513,4 @@ } } -export default Sprite; \ No newline at end of file +export default Sprite; diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index e5c53a7..d48d3b4 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,9 +39,9 @@ */ render(sprite) { - let texture = sprite._texture, - renderer = this.renderer, - wt = sprite.transform.worldTransform, + const texture = sprite._texture, + renderer = this.renderer; + let wt = sprite.transform.worldTransform, dx, dy, width = texture._frame.width, @@ -60,7 +60,7 @@ renderer.context.globalAlpha = sprite.worldAlpha; // If smoothingEnabled is supported and we need to change the smoothing property for sprite texture - let smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; + const smoothingEnabled = texture.baseTexture.scaleMode === CONST.SCALE_MODES.LINEAR; if (renderer.smoothProperty && renderer.context[renderer.smoothProperty] !== smoothingEnabled) { renderer.context[renderer.smoothProperty] = smoothingEnabled; @@ -110,7 +110,7 @@ ); } - let resolution = texture.baseTexture.resolution; + const resolution = texture.baseTexture.resolution; if (sprite.tint !== 0xFFFFFF) { @@ -164,4 +164,4 @@ CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); -export default CanvasSpriteRenderer; \ No newline at end of file +export default CanvasSpriteRenderer; diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index 8f910e0..f7157ce 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,13 +15,12 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: function (sprite, color) - { - let texture = sprite.texture; + getTintedTexture: (sprite, color) => { + const texture = sprite.texture; color = CanvasTinter.roundColor(color); - let stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); + const stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6); texture.tintCache = texture.tintCache || {}; @@ -31,7 +30,7 @@ } // clone texture.. - let canvas = CanvasTinter.canvas || document.createElement('canvas'); + const canvas = CanvasTinter.canvas || document.createElement('canvas'); //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); CanvasTinter.tintMethod(texture, color, canvas); @@ -39,7 +38,7 @@ if (CanvasTinter.convertTintToImage) { // is this better? - let tintImage = new Image(); + const tintImage = new Image(); tintImage.src = canvas.toDataURL(); texture.tintCache[stringColor] = tintImage; @@ -62,11 +61,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithMultiply: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -117,11 +115,11 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithOverlay: function (texture, color, canvas) + tintWithOverlay (texture, color, canvas) { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -159,11 +157,10 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: function (texture, color, canvas) - { - let context = canvas.getContext( '2d' ); - let crop = texture._frame.clone(); - let resolution = texture.baseTexture.resolution; + tintWithPerPixel: (texture, color, canvas) => { + const context = canvas.getContext( '2d' ); + const crop = texture._frame.clone(); + const resolution = texture.baseTexture.resolution; crop.x *= resolution; crop.y *= resolution; @@ -186,12 +183,12 @@ crop.height ); - let rgbValues = utils.hex2rgb(color); - let r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; + const rgbValues = utils.hex2rgb(color); + const r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - let pixelData = context.getImageData(0, 0, crop.width, crop.height); + const pixelData = context.getImageData(0, 0, crop.width, crop.height); - let pixels = pixelData.data; + const pixels = pixelData.data; for (let i = 0; i < pixels.length; i += 4) { @@ -209,11 +206,10 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: function (color) - { - let step = CanvasTinter.cacheStepsPerColorChannel; + roundColor: (color) => { + const step = CanvasTinter.cacheStepsPerColorChannel; - let rgbValues = utils.hex2rgb(color); + const rgbValues = utils.hex2rgb(color); rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step); rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step); @@ -267,4 +263,4 @@ * @param canvas {HTMLCanvasElement} the current canvas */ -export default CanvasTinter; \ No newline at end of file +export default CanvasTinter; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index db0b30d..34d43c2 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -52,7 +52,7 @@ this.buffers = []; for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { - let numVertsTemp = i * 4 * this.vertByteSize; + const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -98,7 +98,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; // step 1: first check max textures the GPU can handle. this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); @@ -115,7 +115,7 @@ // we use the second shader as the first one depending on your browser may omit aTextureId // as it is not used by the shader so is optimized out. - let shader = this.shaders[1]; + const shader = this.shaders[1]; for (let i = 0; i < this.vaoMax; i++) { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); @@ -177,17 +177,17 @@ return; } - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let np2 = bitTwiddle.nextPow2(this.currentIndex); - let log2 = bitTwiddle.log2(np2); - let buffer = this.buffers[log2]; + const np2 = bitTwiddle.nextPow2(this.currentIndex); + const log2 = bitTwiddle.log2(np2); + const buffer = this.buffers[log2]; - let sprites = this.sprites; - let groups = this.groups; + const sprites = this.sprites; + const groups = this.groups; - let float32View = buffer.float32View; - let uint32View = buffer.uint32View; + const float32View = buffer.float32View; + const uint32View = buffer.uint32View; let index = 0; let nextTexture; @@ -208,7 +208,7 @@ TICK++; - let i; + let i; for (i = 0; i < this.currentIndex; i++) { @@ -266,7 +266,7 @@ if (this.renderer.roundPixels) { - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; @@ -339,8 +339,8 @@ /// render the groups.. for (i = 0; i < groupCount; i++) { - let group = groups[i]; - let groupTextureCount = group.textureCount; + const group = groups[i]; + const groupTextureCount = group.textureCount; shader = this.shaders[groupTextureCount-1]; if(!shader) @@ -422,4 +422,4 @@ WebGLRenderer.registerPlugin('sprite', SpriteRenderer); -export default SpriteRenderer; \ No newline at end of file +export default SpriteRenderer; diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 8a6807f..32a28e1 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -17,13 +17,13 @@ function generateMultiTextureShader(gl, maxTextures) { - let vertexSrc = glslify('./texture.vert'); + const vertexSrc = glslify('./texture.vert'); let fragmentSrc = fragTemplate; fragmentSrc = fragmentSrc.replace(/%count%/gi, maxTextures); fragmentSrc = fragmentSrc.replace(/%forloop%/gi, generateSampleSrc(maxTextures)); - let shader = new Shader(gl, vertexSrc, fragmentSrc, {aVertexPosition:3, aColor:2, aTextureCoord:1, aTextureId:0}); + const shader = new Shader(gl, vertexSrc, fragmentSrc); let sampleValues = []; for (let i = 0; i < maxTextures; i++) @@ -53,11 +53,11 @@ if(i < maxTextures-1) { - src += 'if(textureId == ' + i + '.0)'; + src += `if(textureId == ${i}.0)`; } src += '\n{'; - src += '\n\tcolor = texture2D(uSamplers['+i+'], vTextureCoord);'; + src += `\n\tcolor = texture2D(uSamplers[${i}], vTextureCoord);`; src += '\n}'; } @@ -67,4 +67,4 @@ return src; } -export default generateMultiTextureShader; \ No newline at end of file +export default generateMultiTextureShader; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5850fa9..bc7752f 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -31,8 +31,8 @@ { constructor(text, style) { - let canvas = document.createElement('canvas'); - let texture = Texture.fromCanvas(canvas); + const canvas = document.createElement('canvas'); + const texture = Texture.fromCanvas(canvas); texture.orig = new math.Rectangle(); texture.trim = new math.Rectangle(); @@ -103,7 +103,7 @@ */ updateText(respectDirty) { - let style = this._style; + const style = this._style; // check if style has changed.. if(this.localStyleID !== style.styleID) @@ -117,8 +117,8 @@ } // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px - let fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; - this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; + this._font = `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${style.fontFamily}`; this.context.font = this._font; @@ -130,12 +130,11 @@ let lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width - let lineWidths = new Array(lines.length); + const lineWidths = new Array(lines.length); let maxLineWidth = 0; let fontProperties = this.determineFontProperties(this._font); - let i; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -196,7 +195,7 @@ let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -228,7 +227,7 @@ this.context.fillStyle = this._generateFillStyle(style, lines); //draw lines line by line - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { linePositionX = style.strokeThickness / 2; linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent; @@ -261,15 +260,15 @@ * @param {string} text - The text to draw * @param {number} x - Horizontal position to draw the text * @param {number} y - Vertical position to draw the text - * @param {boolean} isStroke - Is this drawing for the outside stroke of the text? If not, it's for the inside fill + * @param {boolean} [isStroke=false] - Is this drawing for the outside stroke of the text? If not, it's for the inside fill * @private */ - drawLetterSpacing(text, x, y, isStroke) + drawLetterSpacing(text, x, y, isStroke=false) { - let style = this._style; + const style = this._style; // letterSpacing of 0 means normal - let letterSpacing = style.letterSpacing; + const letterSpacing = style.letterSpacing; if (letterSpacing === 0) { @@ -284,10 +283,10 @@ return; } - let characters = String.prototype.split.call(text, ''), + const characters = String.prototype.split.call(text, ''); + let currentPosition = x, index = 0, - current, - currentPosition = x; + current; while (index < text.length) { @@ -311,8 +310,8 @@ */ updateTexture() { - let texture = this._texture; - let style = this._style; + const texture = this._texture; + const style = this._style; texture.baseTexture.hasLoaded = true; texture.baseTexture.resolution = this.resolution; @@ -390,14 +389,14 @@ { properties = {}; - let canvas = Text.fontPropertiesCanvas; - let context = Text.fontPropertiesContext; + const canvas = Text.fontPropertiesCanvas; + const context = Text.fontPropertiesContext; context.font = fontStyle; - let width = Math.ceil(context.measureText('|MÉq').width); + const width = Math.ceil(context.measureText('|MÉq').width); let baseline = Math.ceil(context.measureText('M').width); - let height = 2 * baseline; + const height = 2 * baseline; baseline = baseline * 1.4 | 0; @@ -417,15 +416,14 @@ let pixels = imagedata.length; let line = width * 4; - let i, j; - let idx = 0; let stop = false; // ascent. scan from top to bottom until we find a non red pixel + let i; for (i = 0; i < baseline; i++) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -451,7 +449,7 @@ // descent. scan from bottom to top until we find a non red pixel for (i = height; i > baseline; i--) { - for (j = 0; j < line; j += 4) + for (let j = 0; j < line; j += 4) { if (imagedata[idx + j] !== 255) { @@ -491,8 +489,8 @@ // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. let result = ''; - let lines = text.split('\n'); - let wordWrapWidth = this._style.wordWrapWidth; + const lines = text.split('\n'); + const wordWrapWidth = this._style.wordWrapWidth; for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; @@ -588,14 +586,13 @@ { // the gradient will be evenly spaced out according to how large the array is. // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75 - let i; let gradient; let totalIterations; let currentIteration; let stop; - let width = this.canvas.width / this.resolution; - let height = this.canvas.height / this.resolution; + const width = this.canvas.width / this.resolution; + const height = this.canvas.height / this.resolution; if (style.fillGradientType === CONST.TEXT_GRADIENT.LINEAR_VERTICAL) { @@ -606,7 +603,7 @@ // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875 totalIterations = ( style.fill.length + 1 ) * lines.length; currentIteration = 0; - for (i = 0; i < lines.length; i++) + for (let i = 0; i < lines.length; i++) { currentIteration += 1; for (let j = 0; j < style.fill.length; j++) @@ -626,7 +623,7 @@ totalIterations = style.fill.length + 1; currentIteration = 1; - for (i = 0; i < style.fill.length; i++) + for (let i = 0; i < style.fill.length; i++) { stop = currentIteration / totalIterations; gradient.addColorStop(stop, style.fill[i]); @@ -703,7 +700,7 @@ { this.updateText(true); - let sign = utils.sign(this.scale.y) || 1; + const sign = utils.sign(this.scale.y) || 1; this.scale.y = sign * value / this.texture.orig.height; this._height = value; } @@ -764,4 +761,4 @@ Text.fontPropertiesCanvas = document.createElement('canvas'); Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d'); -export default Text; \ No newline at end of file +export default Text; diff --git a/src/core/textures/BaseRenderTexture.js b/src/core/textures/BaseRenderTexture.js index f56b90f..b503b59 100644 --- a/src/core/textures/BaseRenderTexture.js +++ b/src/core/textures/BaseRenderTexture.js @@ -47,14 +47,14 @@ */ class BaseRenderTexture extends BaseTexture { - constructor(width, height, scaleMode, resolution) + constructor(width=100, height=100, scaleMode, resolution) { super(null, scaleMode); this.resolution = resolution || CONST.RESOLUTION; - this.width = width || 100; - this.height = height || 100; + this.width = width; + this.height = height; this.realWidth = this.width * this.resolution; this.realHeight = this.height * this.resolution; @@ -128,4 +128,4 @@ } } -export default BaseRenderTexture; \ No newline at end of file +export default BaseRenderTexture; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 6071868..4d8dd4f 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -246,7 +246,7 @@ // Image fail / not ready this.isLoading = true; - let scope = this; + const scope = this; source.onload = function () { @@ -446,4 +446,4 @@ } } -export default BaseTexture; \ No newline at end of file +export default BaseTexture; diff --git a/src/core/textures/RenderTexture.js b/src/core/textures/RenderTexture.js index f0a6382..542f50c 100644 --- a/src/core/textures/RenderTexture.js +++ b/src/core/textures/RenderTexture.js @@ -49,10 +49,10 @@ if( !(baseRenderTexture instanceof BaseRenderTexture) ) { - let width = arguments[1]; - let height = arguments[2]; - let scaleMode = arguments[3] || 0; - let resolution = arguments[4] || 1; + const width = arguments[1]; + const height = arguments[2]; + const scaleMode = arguments[3] || 0; + const resolution = arguments[4] || 1; // we have an old render texture.. console.warn(`v4 RenderTexture now expects a new BaseRenderTexture. Please use RenderTexture.create(${width}, ${height})`); diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index a7502c8..073e8c0 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -286,11 +286,11 @@ */ static fromFrame(frameId) { - let texture = utils.TextureCache[frameId]; + const texture = utils.TextureCache[frameId]; if (!texture) { - throw new Error('The frameId "' + frameId + '" does not exist in the texture cache'); + throw new Error(`The frameId "${frameId}" does not exist in the texture cache`); } return texture; @@ -356,7 +356,7 @@ //TODO pass in scale mode? if(typeof source === 'string') { - let texture = utils.TextureCache[source]; + const texture = utils.TextureCache[source]; if (!texture) { @@ -413,7 +413,7 @@ */ static removeTextureFromCache(id) { - let texture = utils.TextureCache[id]; + const texture = utils.TextureCache[id]; delete utils.TextureCache[id]; delete utils.BaseTextureCache[id]; @@ -510,4 +510,4 @@ Texture.EMPTY.once = function() {}; Texture.EMPTY.emit = function() {}; -export default Texture; \ No newline at end of file +export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index a752c0e..9ed35e8 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -35,8 +35,8 @@ */ set(frame, baseFrame, rotate) { - let tw = baseFrame.width; - let th = baseFrame.height; + const tw = baseFrame.width; + const th = baseFrame.height; if(rotate) { @@ -82,4 +82,4 @@ } } -export default TextureUvs; \ No newline at end of file +export default TextureUvs; diff --git a/src/core/textures/VideoBaseTexture.js b/src/core/textures/VideoBaseTexture.js index d04c51d..30fc98d 100644 --- a/src/core/textures/VideoBaseTexture.js +++ b/src/core/textures/VideoBaseTexture.js @@ -171,7 +171,7 @@ { if (!video._pixiId) { - video._pixiId = 'video_' + utils.uid(); + video._pixiId = `video_${utils.uid()}`; } let baseTexture = utils.BaseTextureCache[video._pixiId]; @@ -199,7 +199,7 @@ */ static fromUrl(videoSrc, scaleMode) { - let video = document.createElement('video'); + const video = document.createElement('video'); // array of objects or strings if (Array.isArray(videoSrc)) @@ -228,10 +228,10 @@ { if (!type) { - type = 'video/' + path.substr(path.lastIndexOf('.') + 1); + type = `video/${path.substr(path.lastIndexOf('.') + 1)}`; } - let source = document.createElement('source'); + const source = document.createElement('source'); source.src = path; source.type = type; @@ -239,4 +239,4 @@ return source; } -export default VideoBaseTexture; \ No newline at end of file +export default VideoBaseTexture; diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index becc107..f00539a 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -362,9 +362,9 @@ set minFPS(fps) { // Clamp: 0 to TARGET_FPMS - let minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); + const minFPMS = Math.min(Math.max(0, fps) / 1000, CONST.TARGET_FPMS); this._maxElapsedMS = 1 / minFPMS; } } -export default Ticker; \ No newline at end of file +export default Ticker; diff --git a/src/core/utils/createIndicesForQuads.js b/src/core/utils/createIndicesForQuads.js index 5e36f86..5da1cce 100644 --- a/src/core/utils/createIndicesForQuads.js +++ b/src/core/utils/createIndicesForQuads.js @@ -9,9 +9,9 @@ { // the total number of indices in our array, there are 6 points per quad. - let totalIndices = size * 6; + const totalIndices = size * 6; - let indices = new Uint16Array(totalIndices); + const indices = new Uint16Array(totalIndices); // fill the indices with the quads to draw for (let i=0, j=0; i < totalIndices; i += 6, j += 4) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index c4ca354..a3c61e9 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -31,7 +31,7 @@ tempAnchor.href = url; url = _url.parse(tempAnchor.href); - let samePort = (!url.port && loc.port === '') || (url.port === loc.port); + const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 07426e1..88ee493 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -18,7 +18,7 @@ * @memberof PIXI.utils * @return {number} The next unique identifier to use. */ - uid: function () + uid () { return ++utils._uid; }, @@ -31,7 +31,7 @@ * @param {number[]} [out=[]] If supplied, this array will be used rather than returning a new one * @return {number[]} An array representing the [R, G, B] of the color. */ - hex2rgb: function (hex, out) + hex2rgb (hex, out) { out = out || []; @@ -49,7 +49,7 @@ * @param hex {number} Number in hex * @return {string} The string color. */ - hex2string: function (hex) + hex2string (hex) { hex = hex.toString(16); hex = '000000'.substr(0, 6 - hex.length) + hex; @@ -64,7 +64,7 @@ * @param rgb {number[]} rgb array * @return {number} The color number */ - rgb2hex: function (rgb) + rgb2hex (rgb) { return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255); }, @@ -78,9 +78,9 @@ * @param url {string} the image path * @return {number} resolution / device pixel ratio of an asset */ - getResolutionOfUrl: function (url) + getResolutionOfUrl (url) { - let resolution = CONST.RETINA_PREFIX.exec(url); + const resolution = CONST.RETINA_PREFIX.exec(url); if (resolution) { @@ -101,7 +101,7 @@ * @constant * @static */ - sayHello: function (type) + sayHello (type) { if (utils._saidHello) { @@ -111,7 +111,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { let args = [ - '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰ %c ' + ' %c ' + ' http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n', + `\n %c %c %c Pixi.js ${CONST.VERSION} - ✰ ${type} ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n`, 'background: #ff66a5; padding:5px 0;', 'background: #ff66a5; padding:5px 0;', 'color: #ff66a5; background: #030307; padding:5px 0;', @@ -139,9 +139,9 @@ * @memberof PIXI.utils * @return {boolean} is webgl supported */ - isWebGLSupported: function () + isWebGLSupported () { - let contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; + const contextOptions = { stencil: true, failIfMajorPerformanceCaveat: true }; try { if (!window.WebGLRenderingContext) @@ -149,8 +149,8 @@ return false; } - let canvas = document.createElement('canvas'), - gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); + const canvas = document.createElement('canvas'); + let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); let success = !!(gl && gl.getContextAttributes().stencil); if (gl) @@ -179,7 +179,7 @@ * @param n {number} * @returns {number} 0 if n is 0, -1 if n is negative, 1 if n i positive */ - sign: function (n) + sign (n) { return n ? (n < 0 ? -1 : 1) : 0; }, @@ -192,7 +192,7 @@ * @param {number} startIdx The index to begin removing from (inclusive) * @param {number} removeCount How many items to remove */ - removeItems: function (arr, startIdx, removeCount) + removeItems (arr, startIdx, removeCount) { let length = arr.length; diff --git a/src/deprecation.js b/src/deprecation.js index 5d5357f..198c43e 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -72,7 +72,7 @@ * @deprecated since version 3.0.0 */ Stage: { - get: function() + get() { // @if DEBUG warn('You do not need to use a PIXI Stage any more, you can simply render any container.'); @@ -90,7 +90,7 @@ * @deprecated since version 3.0.0 */ DisplayObjectContainer: { - get: function() + get() { // @if DEBUG warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.'); @@ -108,7 +108,7 @@ * @deprecated since version 3.0.0 */ Strip: { - get: function() + get() { // @if DEBUG warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.'); @@ -126,7 +126,7 @@ * @deprecated since version 3.0.0 */ Rope: { - get: function() + get() { // @if DEBUG warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.'); @@ -144,7 +144,7 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get: function() { + get() { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -161,7 +161,7 @@ * @deprecated since version 3.0.0 */ MovieClip: { - get: function() + get() { // @if DEBUG warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.'); @@ -179,7 +179,7 @@ * @deprecated since version 3.0.0 */ TilingSprite: { - get: function() + get() { // @if DEBUG warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.'); @@ -197,7 +197,7 @@ * @deprecated since version 3.0.0 */ BitmapText: { - get: function() + get() { // @if DEBUG warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.'); @@ -215,7 +215,7 @@ * @deprecated since version 3.0.0 */ blendModes: { - get: function() + get() { // @if DEBUG warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.'); @@ -233,7 +233,7 @@ * @deprecated since version 3.0.0 */ scaleModes: { - get: function() + get() { // @if DEBUG warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.'); @@ -251,7 +251,7 @@ * @deprecated since version 3.0.0 */ BaseTextureCache: { - get: function () + get () { // @if DEBUG warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.'); @@ -269,7 +269,7 @@ * @deprecated since version 3.0.0 */ TextureCache: { - get: function () + get () { // @if DEBUG warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.'); @@ -287,7 +287,7 @@ * @deprecated since version 3.0.6 */ math: { - get: function () + get () { // @if DEBUG warn('The math namespace is deprecated, please access members already accessible on PIXI.'); @@ -304,7 +304,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -321,7 +321,7 @@ * @deprecated since version 4.0.0 */ TransformManual: { - get: function() + get() { // @if DEBUG warn('TransformManual has been renamed to TransformBase, please update your pixi-spine'); @@ -417,7 +417,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myBitmapText.text = 'my text';`); // @endif }; @@ -431,7 +431,7 @@ { this.text = text; // @if DEBUG - warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';'); + warn(`setText is now deprecated, please use the text property, e.g : myText.text = 'my text';`); // @endif }; @@ -457,18 +457,18 @@ * @deprecated since version 4.0.0 */ font: { - get: function () + get () { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif - let fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; - return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + let fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; + return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, - set: function (font) + set (font) { // @if DEBUG - warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + warn(`text style property 'font' is now deprecated, please use the 'fontFamily','fontSize',fontStyle','fontVariant' and 'fontWeight' properties from now on`); // @endif // can work out fontStyle from search of whole string @@ -497,11 +497,10 @@ // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units let splits = font.split(' '); - let i; let fontSizeIndex = -1; this._fontSize = 26; - for ( i = 0; i < splits.length; ++i ) + for ( let i = 0; i < splits.length; ++i ) { if ( splits[i].match( /(px|pt|em|%)/ ) ) { @@ -513,7 +512,7 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( i = 0; i < fontSizeIndex; ++i ) + for ( let i = 0; i < fontSizeIndex; ++i ) { if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) { @@ -526,7 +525,7 @@ if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) { this._fontFamily = ''; - for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) { this._fontFamily += splits[i] + ' '; } @@ -567,7 +566,7 @@ * @deprecated since version 3.0.6 */ AbstractFilter: { - get: function() + get() { // @if DEBUG warn('AstractFilter has been renamed to Filter, please use PIXI.Filter'); @@ -584,7 +583,7 @@ * @deprecated since version 3.0.6 */ SpriteMaskFilter: { - get: function() + get() { // @if DEBUG warn('filters.SpriteMaskFilter is an undocumented alias, please use SpriteMaskFilter from now on.'); @@ -619,4 +618,4 @@ warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif return core.CanvasTinter.canUseMultiply; -}; \ No newline at end of file +}; diff --git a/src/extract/canvas/CanvasExtract.js b/src/extract/canvas/CanvasExtract.js index 4658f78..c3f0055 100644 --- a/src/extract/canvas/CanvasExtract.js +++ b/src/extract/canvas/CanvasExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; @@ -79,11 +79,11 @@ frame.height = this.renderer.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); - let canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -98,7 +98,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let context; let resolution; let frame; diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index e26457c..208cae9 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -23,7 +23,7 @@ */ image( target ) { - let image = new Image(); + const image = new Image(); image.src = this.base64( target ); return image; } @@ -45,7 +45,7 @@ */ canvas( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -86,10 +86,10 @@ - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let canvasBuffer = new core.CanvasRenderTarget(width, height); + const canvasBuffer = new core.CanvasRenderTarget(width, height); if(textureBuffer) { @@ -128,7 +128,7 @@ */ pixels( target ) { - let renderer = this.renderer; + const renderer = this.renderer; let textureBuffer; let resolution; let frame; @@ -163,10 +163,10 @@ frame.height = textureBuffer.size.height; } - let width = frame.width * resolution; - let height = frame.height * resolution; + const width = frame.width * resolution; + const height = frame.height * resolution; - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); if(textureBuffer) { diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 6428502..985fc0b 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,12 +30,10 @@ */ class BitmapText extends core.Container { - constructor(text, style) + constructor(text, style={}) { super(); - style = style || {}; - /** * The width of the overall text, different from fontSize, * which is defined in the style object @@ -131,15 +129,16 @@ */ updateText() { - let data = BitmapText.fonts[this._font.name]; - let pos = new core.Point(); + const data = BitmapText.fonts[this._font.name]; + const scale = this._font.size / data.size; + const pos = new core.Point(); + const chars = []; + const lineWidths = []; + let prevCharCode = null; - let chars = []; let lastLineWidth = 0; let maxLineWidth = 0; - let lineWidths = []; let line = 0; - let scale = this._font.size / data.size; let lastSpace = -1; let lastSpaceWidth = 0; let maxLineHeight = 0; @@ -147,7 +146,7 @@ for (let i = 0; i < this.text.length; i++) { let charCode = this.text.charCodeAt(i); - + if(/(\s)/.test(this.text.charAt(i))){ lastSpace = i; lastSpaceWidth = lastLineWidth; @@ -193,7 +192,7 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + chars.push({texture:charData.texture, line, charCode, position: new core.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); lastLineWidth = pos.x + (charData.texture.width + charData.xOffset); pos.x += charData.xAdvance; maxLineHeight = Math.max(maxLineHeight, (charData.yOffset + charData.texture.height)); @@ -421,4 +420,4 @@ export default BitmapText; -BitmapText.fonts = {}; \ No newline at end of file +BitmapText.fonts = {}; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index 8827f00..a5213e6 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -151,7 +151,7 @@ */ update(deltaTime) { - let elapsed = this.animationSpeed * deltaTime; + const elapsed = this.animationSpeed * deltaTime; if (this._durations !== null) { @@ -225,7 +225,7 @@ */ static fromFrames(frames) { - let textures = []; + const textures = []; for (let i = 0; i < frames.length; ++i) { @@ -243,7 +243,7 @@ */ static fromImages(images) { - let textures = []; + const textures = []; for (let i = 0; i < images.length; ++i) { @@ -315,4 +315,4 @@ } } -export default MovieClip; \ No newline at end of file +export default MovieClip; diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index b02da6c..1e94177 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -12,12 +12,12 @@ * @extends PIXI.Sprite * @memberof PIXI.extras * @param texture {PIXI.Texture} the texture of the tiling sprite - * @param width {number} the width of the tiling sprite - * @param height {number} the height of the tiling sprite + * @param [width=100] {number} the width of the tiling sprite + * @param [height=100] {number} the height of the tiling sprite */ class TilingSprite extends core.Sprite { - constructor(texture, width, height) + constructor(texture, width=100, height=100) { super(texture); @@ -44,7 +44,7 @@ * @member {number} * @private */ - this._width = width || 100; + this._width = width; /** * The height of the tiling sprite @@ -52,7 +52,7 @@ * @member {number} * @private */ - this._height = height || 100; + this._height = height; /** * An internal WebGL UV cache. @@ -83,7 +83,7 @@ { // tweak our texture temporarily.. - let texture = this._texture; + const texture = this._texture; if(!texture || !texture._uvs) { @@ -93,7 +93,7 @@ // get rid of any thing that may be batching. renderer.flush(); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -109,7 +109,7 @@ } // if the sprite is trimmed and is not a tilingsprite then we need to add the extra space before transforming the sprite coords.. - let vertices = glData.quad.vertices; + const vertices = glData.quad.vertices; vertices[0] = vertices[6] = ( this._width ) * -this.anchor.x; vertices[1] = vertices[3] = this._height * -this.anchor.y; @@ -121,25 +121,25 @@ renderer.bindShader(glData.shader); - let textureUvs = texture._uvs, + const textureUvs = texture._uvs, textureWidth = texture._frame.width, textureHeight = texture._frame.height, textureBaseWidth = texture.baseTexture.width, textureBaseHeight = texture.baseTexture.height; - let uPixelSize = glData.shader.uniforms.uPixelSize; + const uPixelSize = glData.shader.uniforms.uPixelSize; uPixelSize[0] = 1.0/textureBaseWidth; uPixelSize[1] = 1.0/textureBaseHeight; glData.shader.uniforms.uPixelSize = uPixelSize; - let uFrame = glData.shader.uniforms.uFrame; + const uFrame = glData.shader.uniforms.uFrame; uFrame[0] = textureUvs.x0; uFrame[1] = textureUvs.y0; uFrame[2] = textureUvs.x1 - textureUvs.x0; uFrame[3] = textureUvs.y2 - textureUvs.y0; glData.shader.uniforms.uFrame = uFrame; - let uTransform = glData.shader.uniforms.uTransform; + const uTransform = glData.shader.uniforms.uTransform; uTransform[0] = (this.tilePosition.x % (textureWidth * this.tileScale.x)) / this._width; uTransform[1] = (this.tilePosition.y % (textureHeight * this.tileScale.y)) / this._height; uTransform[2] = ( textureBaseWidth / this._width ) * this.tileScale.x; @@ -148,7 +148,7 @@ glData.shader.uniforms.translationMatrix = this.worldTransform.toArray(true); - let color = tempArray; + const color = tempArray; core.utils.hex2rgb(this.tint, color); color[3] = this.worldAlpha; @@ -169,14 +169,14 @@ */ _renderCanvas(renderer) { - let texture = this._texture; + const texture = this._texture; if (!texture.baseTexture.hasLoaded) { return; } - let context = renderer.context, + const context = renderer.context, transform = this.worldTransform, resolution = renderer.resolution, baseTexture = texture.baseTexture, @@ -188,7 +188,7 @@ if(!this._canvasPattern) { // cut an object from a spritesheet.. - let tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); + const tempCanvas = new core.CanvasRenderTarget(texture._frame.width, texture._frame.height); // Tint the tiling sprite if (this.tint !== 0xFFFFFF) @@ -224,7 +224,7 @@ modY + (this.anchor.y * -this._height)); // check blend mode - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== renderer.context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -251,35 +251,35 @@ */ getBounds() { - let width = this._width; - let height = this._height; + const width = this._width; + const height = this._height; - let w0 = width * (1-this.anchor.x); - let w1 = width * -this.anchor.x; + const w0 = width * (1-this.anchor.x); + const w1 = width * -this.anchor.x; - let h0 = height * (1-this.anchor.y); - let h1 = height * -this.anchor.y; + const h0 = height * (1-this.anchor.y); + const h1 = height * -this.anchor.y; - let worldTransform = this.worldTransform; + const worldTransform = this.worldTransform; - let a = worldTransform.a; - let b = worldTransform.b; - let c = worldTransform.c; - let d = worldTransform.d; - let tx = worldTransform.tx; - let ty = worldTransform.ty; + const a = worldTransform.a; + const b = worldTransform.b; + const c = worldTransform.c; + const d = worldTransform.d; + const tx = worldTransform.tx; + const ty = worldTransform.ty; - let x1 = a * w1 + c * h1 + tx; - let y1 = d * h1 + b * w1 + ty; + const x1 = a * w1 + c * h1 + tx; + const y1 = d * h1 + b * w1 + ty; - let x2 = a * w0 + c * h1 + tx; - let y2 = d * h1 + b * w0 + ty; + const x2 = a * w0 + c * h1 + tx; + const y2 = d * h1 + b * w0 + ty; - let x3 = a * w0 + c * h0 + tx; - let y3 = d * h0 + b * w0 + ty; + const x3 = a * w0 + c * h0 + tx; + const y3 = d * h0 + b * w0 + ty; - let x4 = a * w1 + c * h0 + tx; - let y4 = d * h0 + b * w1 + ty; + const x4 = a * w1 + c * h0 + tx; + const y4 = d * h0 + b * w1 + ty; let minX, maxX, @@ -306,7 +306,7 @@ maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - let bounds = this._bounds; + const bounds = this._bounds; bounds.x = minX; bounds.width = maxX - minX; @@ -331,11 +331,10 @@ let width = this._width; let height = this._height; let x1 = -width * this.anchor.x; - let y1; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - y1 = -height * this.anchor.y; + let y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -447,4 +446,4 @@ } } -export default TilingSprite; \ No newline at end of file +export default TilingSprite; diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 403e4f6..70b00f3 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,7 @@ // figured theres no point adding ALL the extra variables to prototype. // this model can hold the information needed. This can also be generated on demand as // most objects are not cached as bitmaps. -let CacheData = function(){ +const CacheData = function(){ this.originalRenderWebGL = null; this.originalRenderCanvas = null; @@ -36,11 +36,11 @@ * @memberof PIXI.DisplayObject# */ cacheAsBitmap: { - get: function () + get () { return this._cacheAsBitmap; }, - set: function (value) + set (value) { if (this._cacheAsBitmap === value) { @@ -143,7 +143,7 @@ } // make sure alpha is set to 1 otherwise it will get rendered as invisible! - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture) @@ -152,28 +152,28 @@ // next we find the dimensions of the untransformed object // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function // TODO pass an object to clone too? saves having to create a new one each time! - let bounds = this.getLocalBounds().clone(); + const bounds = this.getLocalBounds().clone(); // add some padding! if(this._filters) { - let padding = this._filters[0].padding; + const padding = this._filters[0].padding; bounds.pad(padding); } // for now we cache the current renderTarget that the webGL renderer is currently using. // this could be more elegent.. - let cachedRenderTarget = renderer._activeRenderTarget; + const cachedRenderTarget = renderer._activeRenderTarget; // We also store the filter stack - I will definitely look to change how this works a little later down the line. - let stack = renderer.filterManager.filterStack; + const stack = renderer.filterManager.filterStack; // this renderTexture will be used to store the cached DisplayObject - let renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; m.tx = -bounds.x; m.ty = -bounds.y; @@ -198,7 +198,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -254,17 +254,17 @@ } //get bounds actually transforms the object for us already! - let bounds = this.getLocalBounds(); + const bounds = this.getLocalBounds(); - let cacheAlpha = this.alpha; + const cacheAlpha = this.alpha; this.alpha = 1; - let cachedRenderTarget = renderer.context; + const cachedRenderTarget = renderer.context; - let renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); + const renderTexture = new core.RenderTexture.create(bounds.width | 0, bounds.height | 0); // need to set // - let m = _tempMatrix; + const m = _tempMatrix; this.transform.worldTransform.copy(m); m.invert(); @@ -288,7 +288,7 @@ this.filterArea = null; // create our cached sprite - let cachedSprite = new core.Sprite(renderTexture); + const cachedSprite = new core.Sprite(renderTexture); cachedSprite.transform.worldTransform = this.transform.worldTransform; cachedSprite.anchor.x = -( bounds.x / bounds.width ); cachedSprite.anchor.y = -( bounds.y / bounds.height ); diff --git a/src/filters/blur/BlurFilter.js b/src/filters/blur/BlurFilter.js index 659c0e1..1ef429e 100644 --- a/src/filters/blur/BlurFilter.js +++ b/src/filters/blur/BlurFilter.js @@ -29,7 +29,7 @@ apply(filterManager, input, output) { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); this.blurXFilter.apply(filterManager, input, renderTarget, true); this.blurYFilter.apply(filterManager, renderTarget, output, false); @@ -105,4 +105,4 @@ } } -export default BlurFilter; \ No newline at end of file +export default BlurFilter; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 53768cf..3270e5e 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -39,8 +39,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, true); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -60,7 +60,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -68,7 +68,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } @@ -95,7 +95,7 @@ this.padding = Math.abs(value) * 2; this.strength = value; } - + /** * Sets the quality of the blur by modifying the number of passes. More passes means higher quaility bluring but the lower the performance. * @@ -114,4 +114,4 @@ } } -export default BlurXFilter; \ No newline at end of file +export default BlurXFilter; diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index b5dcc84..1c41912 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, false); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, false); + const fragSrc = generateBlurFragSource(5); super( // vertex shader @@ -38,8 +38,8 @@ { if(this.firstRun) { - let gl = filterManager.renderer.gl; - let kernelSize = getMaxBlurKernelSize(gl); + const gl = filterManager.renderer.gl; + const kernelSize = getMaxBlurKernelSize(gl); this.vertexSrc = generateBlurVertSource(kernelSize, false); this.fragmentSrc = generateBlurFragSource(kernelSize); @@ -58,7 +58,7 @@ } else { - let renderTarget = filterManager.getRenderTarget(true); + const renderTarget = filterManager.getRenderTarget(true); let flip = input; let flop = renderTarget; @@ -112,4 +112,4 @@ } } -export default BlurYFilter; +export default BlurYFilter; diff --git a/src/filters/blur/generateBlurFragSource.js b/src/filters/blur/generateBlurFragSource.js index ecb4ac8..ec4b3ee 100644 --- a/src/filters/blur/generateBlurFragSource.js +++ b/src/filters/blur/generateBlurFragSource.js @@ -21,14 +21,14 @@ const generateFragBlurSource = function(kernelSize) { - let kernel = GAUSSIAN_VALUES[kernelSize]; - let halfLength = kernel.length; + const kernel = GAUSSIAN_VALUES[kernelSize]; + const halfLength = kernel.length; let fragSource = fragTemplate; let blurLoop = ''; - let template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; - let value; + const template = 'gl_FragColor += texture2D(uSampler, vBlurTexCoords[%index%]) * %value%;'; + let value; for (let i = 0; i < kernelSize; i++) { @@ -55,4 +55,4 @@ return fragSource; }; -export default generateFragBlurSource; \ No newline at end of file +export default generateFragBlurSource; diff --git a/src/filters/blur/generateBlurVertSource.js b/src/filters/blur/generateBlurVertSource.js index 9658209..3f2e989 100644 --- a/src/filters/blur/generateBlurVertSource.js +++ b/src/filters/blur/generateBlurVertSource.js @@ -16,7 +16,7 @@ const generateVertBlurSource = function(kernelSize, x) { - let halfLength = Math.ceil(kernelSize/2); + const halfLength = Math.ceil(kernelSize/2); let vertSource = vertTemplate; @@ -58,4 +58,4 @@ return vertSource; }; -export default generateVertBlurSource; \ No newline at end of file +export default generateVertBlurSource; diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index a83aa79..da79b08 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -107,7 +107,7 @@ _colorMatrix(matrix) { // Create a Float32 Array and normalize the offset component to 0-1 - let m = new Float32Array(matrix); + const m = new Float32Array(matrix); m[4] /= 255; m[9] /= 255; m[14] /= 255; @@ -124,7 +124,7 @@ */ brightness(b, multiply) { - let matrix = [ + const matrix = [ b, 0, 0, 0, 0, 0, b, 0, 0, 0, 0, 0, b, 0, 0, @@ -142,7 +142,7 @@ */ greyscale(scale, multiply) { - let matrix = [ + const matrix = [ scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, scale, scale, scale, 0, 0, @@ -160,7 +160,7 @@ */ blackAndWhite(multiply) { - let matrix = [ + const matrix = [ 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, @@ -180,7 +180,7 @@ { rotation = (rotation || 0) / 180 * Math.PI; - let cosR = Math.cos(rotation), + const cosR = Math.cos(rotation), sinR = Math.sin(rotation), sqrt = Math.sqrt; @@ -197,22 +197,22 @@ see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 */ - let w = 1/3, sqrW = sqrt(w);//weight is + const w = 1/3, sqrW = sqrt(w);//weight is - let a00 = cosR + (1.0 - cosR) * w; - let a01 = w * (1.0 - cosR) - sqrW * sinR; - let a02 = w * (1.0 - cosR) + sqrW * sinR; + const a00 = cosR + (1.0 - cosR) * w; + const a01 = w * (1.0 - cosR) - sqrW * sinR; + const a02 = w * (1.0 - cosR) + sqrW * sinR; - let a10 = w * (1.0 - cosR) + sqrW * sinR; - let a11 = cosR + w*(1.0 - cosR); - let a12 = w * (1.0 - cosR) - sqrW * sinR; + const a10 = w * (1.0 - cosR) + sqrW * sinR; + const a11 = cosR + w*(1.0 - cosR); + const a12 = w * (1.0 - cosR) - sqrW * sinR; - let a20 = w * (1.0 - cosR) - sqrW * sinR; - let a21 = w * (1.0 - cosR) + sqrW * sinR; - let a22 = cosR + w * (1.0 - cosR); + const a20 = w * (1.0 - cosR) - sqrW * sinR; + const a21 = w * (1.0 - cosR) + sqrW * sinR; + const a22 = cosR + w * (1.0 - cosR); - let matrix = [ + const matrix = [ a00, a01, a02, 0, 0, a10, a11, a12, 0, 0, a20, a21, a22, 0, 0, @@ -233,10 +233,10 @@ */ contrast(amount, multiply) { - let v = (amount || 0) + 1; - let o = -128 * (v - 1); + const v = (amount || 0) + 1; + const o = -128 * (v - 1); - let matrix = [ + const matrix = [ v, 0, 0, 0, o, 0, v, 0, 0, o, 0, 0, v, 0, o, @@ -255,10 +255,10 @@ */ saturate(amount, multiply) { - let x = (amount || 0) * 2 / 3 + 1; - let y = ((x - 1) * -0.5); + const x = (amount || 0) * 2 / 3 + 1; + const y = ((x - 1) * -0.5); - let matrix = [ + const matrix = [ x, y, y, 0, 0, y, x, y, 0, 0, y, y, x, 0, 0, @@ -286,7 +286,7 @@ */ negative(multiply) { - let matrix = [ + const matrix = [ 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, @@ -303,7 +303,7 @@ */ sepia(multiply) { - let matrix = [ + const matrix = [ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, @@ -320,7 +320,7 @@ */ technicolor(multiply) { - let matrix = [ + const matrix = [ 1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138, @@ -337,7 +337,7 @@ */ polaroid(multiply) { - let matrix = [ + const matrix = [ 1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, @@ -354,7 +354,7 @@ */ toBGR(multiply) { - let matrix = [ + const matrix = [ 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, @@ -371,7 +371,7 @@ */ kodachrome(multiply) { - let matrix = [ + const matrix = [ 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, @@ -388,7 +388,7 @@ */ browni(multiply) { - let matrix = [ + const matrix = [ 0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283, @@ -405,7 +405,7 @@ */ vintage(multiply) { - let matrix = [ + const matrix = [ 0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123, 0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591, 0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296, @@ -432,15 +432,15 @@ lightColor = lightColor || 0xFFE580; darkColor = darkColor || 0x338000; - let lR = ((lightColor >> 16) & 0xFF) / 255; - let lG = ((lightColor >> 8) & 0xFF) / 255; - let lB = (lightColor & 0xFF) / 255; + const lR = ((lightColor >> 16) & 0xFF) / 255; + const lG = ((lightColor >> 8) & 0xFF) / 255; + const lB = (lightColor & 0xFF) / 255; - let dR = ((darkColor >> 16) & 0xFF) / 255; - let dG = ((darkColor >> 8) & 0xFF) / 255; - let dB = (darkColor & 0xFF) / 255; + const dR = ((darkColor >> 16) & 0xFF) / 255; + const dG = ((darkColor >> 8) & 0xFF) / 255; + const dB = (darkColor & 0xFF) / 255; - let matrix = [ + const matrix = [ 0.3, 0.59, 0.11, 0, 0, lR, lG, lB, desaturation, 0, dR, dG, dB, toned, 0, @@ -459,7 +459,7 @@ night(intensity, multiply) { intensity = intensity || 0.1; - let matrix = [ + const matrix = [ intensity * ( -2.0), -intensity, 0, 0, 0, -intensity, 0, intensity, 0, 0, 0, intensity, intensity * 2.0, 0, 0, @@ -480,7 +480,7 @@ */ predator(amount, multiply) { - let matrix = [ + const matrix = [ 11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount, -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount, -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount, @@ -500,7 +500,7 @@ */ lsd(multiply) { - let matrix = [ + const matrix = [ 2, -0.4, 0.5, 0, 0, -0.5, 2, -0.4, 0, 0, -0.4, -0.5, 3, 0, 0, @@ -516,7 +516,7 @@ */ reset() { - let matrix = [ + const matrix = [ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, @@ -546,4 +546,4 @@ //Americanized alias ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale; -export default ColorMatrixFilter; \ No newline at end of file +export default ColorMatrixFilter; diff --git a/src/filters/displacement/DisplacementFilter.js b/src/filters/displacement/DisplacementFilter.js index d222540..862acc9 100644 --- a/src/filters/displacement/DisplacementFilter.js +++ b/src/filters/displacement/DisplacementFilter.js @@ -16,7 +16,7 @@ { constructor(sprite, scale) { - let maskMatrix = new core.Matrix(); + const maskMatrix = new core.Matrix(); sprite.renderable = false; super( @@ -45,7 +45,7 @@ apply(filterManager, input, output) { - let ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); + const ratio = (1/output.destinationFrame.width) * (output.size.width/input.size.width); /// // * 2 //4//this.strength / 4 / this.passes * (input.frame.width / input.size.width); this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); this.uniforms.scale.x = this.scale.x * ratio; @@ -71,4 +71,4 @@ } } -export default DisplacementFilter; \ No newline at end of file +export default DisplacementFilter; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index eb6623e..d5c1467 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,7 @@ target: null, type: null, data: this.mouse, - stopPropagation:function(){ + stopPropagation(){ this.stopped = true; } }; @@ -324,13 +324,13 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution) + setTargetElement(element, resolution=1) { this.removeEvents(); this.interactionDOMElement = element; - this.resolution = resolution || 1; + this.resolution = resolution; this.addEvents(); } @@ -557,7 +557,7 @@ // This will allow pixi to completly ignore and bypass checking the displayObjects children. if(displayObject.interactiveChildren) { - let children = displayObject.children; + const children = displayObject.children; for (let i = children.length-1; i >= 0; i--) { @@ -700,10 +700,10 @@ */ processMouseUp( displayObject, hit ) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; - let isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isRightButton = e.button === 2 || e.which === 3; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; if(hit) { @@ -862,14 +862,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; //TODO POOL - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -914,14 +914,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -980,14 +980,14 @@ event.preventDefault(); } - let changedTouches = event.changedTouches; - let cLength = changedTouches.length; + const changedTouches = event.changedTouches; + const cLength = changedTouches.length; for (let i=0; i < cLength; i++) { - let touchEvent = changedTouches[i]; + const touchEvent = changedTouches[i]; - let touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData( touchEvent ); touchData.originalEvent = event; @@ -1026,12 +1026,7 @@ */ getTouchData(touchEvent) { - let touchData = this.interactiveDataPool.pop(); - - if(!touchData) - { - touchData = new InteractionData(); - } + const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index e32ee4c..4b034b1 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -4,9 +4,9 @@ import path from 'path'; function parse(resource, texture) { - let data = {}; - let info = resource.data.getElementsByTagName('info')[0]; - let common = resource.data.getElementsByTagName('common')[0]; + const data = {}; + const info = resource.data.getElementsByTagName('info')[0]; + const common = resource.data.getElementsByTagName('common')[0]; data.font = info.getAttribute('face'); data.size = parseInt(info.getAttribute('size'), 10); @@ -18,9 +18,9 @@ for (let i = 0; i < letters.length; i++) { - let charCode = parseInt(letters[i].getAttribute('id'), 10); + const charCode = parseInt(letters[i].getAttribute('id'), 10); - let textureRect = new core.Rectangle( + const textureRect = new core.Rectangle( parseInt(letters[i].getAttribute('x'), 10) + texture.frame.x, parseInt(letters[i].getAttribute('y'), 10) + texture.frame.y, parseInt(letters[i].getAttribute('width'), 10), @@ -38,12 +38,12 @@ } //parse kernings - let kernings = resource.data.getElementsByTagName('kerning'); + const kernings = resource.data.getElementsByTagName('kerning'); for (let i = 0; i < kernings.length; i++) { - let first = parseInt(kernings[i].getAttribute('first'), 10); - let second = parseInt(kernings[i].getAttribute('second'), 10); - let amount = parseInt(kernings[i].getAttribute('amount'), 10); + const first = parseInt(kernings[i].getAttribute('first'), 10); + const second = parseInt(kernings[i].getAttribute('second'), 10); + const amount = parseInt(kernings[i].getAttribute('amount'), 10); if(data.chars[second]) { @@ -96,12 +96,12 @@ xmlUrl = xmlUrl.replace(this.baseUrl, ''); } } - + // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty. if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') { xmlUrl += '/'; } - + let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); if (core.utils.TextureCache[textureUrl]) { //reuse existing texture @@ -115,7 +115,7 @@ metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, function (res) { + this.add(resource.name + '_image', textureUrl, loadOptions, res => { parse(resource, res.texture); next(); }); diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 3fa8b7f..34a60b4 100644 --- a/src/loaders/spritesheetParser.js +++ b/src/loaders/spritesheetParser.js @@ -9,7 +9,7 @@ return function (resource, next) { let resourcePath; - let imageResourceName = resource.name + '_image'; + let imageResourceName = `${resource.name}_image`; // skip if no data, its not json, it isn't spritesheet data, or the image resource already exists if (!resource.data || !resource.isJson || !resource.data.frames || this.resources[imageResourceName]) @@ -17,7 +17,7 @@ return next(); } - let loadOptions = { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata @@ -30,7 +30,7 @@ } else { - resourcePath = path.dirname(resource.url.replace(this.baseUrl, '')) + '/' + resource.data.meta.image; + resourcePath = `${path.dirname(resource.url.replace(this.baseUrl, ''))}/${resource.data.meta.image}`; } // load the image for this sheet @@ -38,9 +38,9 @@ { resource.textures = {}; - let frames = resource.data.frames; - let frameKeys = Object.keys(frames); - let resolution = core.utils.getResolutionOfUrl(resource.url); + const frames = resource.data.frames; + const frameKeys = Object.keys(frames); + const resolution = core.utils.getResolutionOfUrl(resource.url); let batchIndex = 0; function processFrames(initialFrameIndex, maxFrames) @@ -50,14 +50,14 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { let i = frameKeys[frameIndex]; - let rect = frames[i].frame; + const rect = frames[i].frame; if (rect) { let frame = null; let trim = null; - let orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); + const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); if (frames[i].rotated) { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); @@ -101,7 +101,7 @@ } function iteration() { - processNextBatch(function() { + processNextBatch(() => { if (shouldProcessNextBatch()) { iteration(); } else { diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index f269992..0c2eff2 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -122,7 +122,7 @@ renderer.flush(); // renderer.plugins.mesh.render(this); - let gl = renderer.gl; + const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; if(!glData) @@ -172,7 +172,7 @@ glData.shader.uniforms.alpha = this.worldAlpha; glData.shader.uniforms.tint = this.tintRgb; - let drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; + const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() .draw(drawMode, this.indices.length) @@ -187,10 +187,10 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -220,16 +220,16 @@ _renderCanvasTriangleMesh(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; + const vertices = this.vertices; + const uvs = this.uvs; - let length = vertices.length / 2; + const length = vertices.length / 2; // this.count++; for (let i = 0; i < length - 2; i++) { // draw some triangles! - let index = i * 2; + const index = i * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index, (index + 2), (index + 4)); } } @@ -243,17 +243,17 @@ _renderCanvasTriangles(context) { // draw triangles!! - let vertices = this.vertices; - let uvs = this.uvs; - let indices = this.indices; + const vertices = this.vertices; + const uvs = this.uvs; + const indices = this.indices; - let length = indices.length; + const length = indices.length; // this.count++; for (let i = 0; i < length; i += 3) { // draw some triangles! - let index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; + const index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2; this._renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2); } } @@ -271,23 +271,23 @@ */ _renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2) { - let base = this._texture.baseTexture; - let textureSource = base.source; - let textureWidth = base.width; - let textureHeight = base.height; + const base = this._texture.baseTexture; + const textureSource = base.source; + const textureWidth = base.width; + const textureHeight = base.height; let x0 = vertices[index0], x1 = vertices[index1], x2 = vertices[index2]; let y0 = vertices[index0 + 1], y1 = vertices[index1 + 1], y2 = vertices[index2 + 1]; - let u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; - let v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; + const u0 = uvs[index0] * base.width, u1 = uvs[index1] * base.width, u2 = uvs[index2] * base.width; + const v0 = uvs[index0 + 1] * base.height, v1 = uvs[index1 + 1] * base.height, v2 = uvs[index2 + 1] * base.height; if (this.canvasPadding > 0) { - let paddingX = this.canvasPadding / this.worldTransform.a; - let paddingY = this.canvasPadding / this.worldTransform.d; - let centerX = (x0 + x1 + x2) / 3; - let centerY = (y0 + y1 + y2) / 3; + const paddingX = this.canvasPadding / this.worldTransform.a; + const paddingY = this.canvasPadding / this.worldTransform.d; + const centerX = (x0 + x1 + x2) / 3; + const centerY = (y0 + y1 + y2) / 3; let normX = x0 - centerX; let normY = y0 - centerY; @@ -326,13 +326,13 @@ context.clip(); // Compute matrix transform - let delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); - let deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); - let deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); - let deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); - let deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); - let deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); - let deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); + const delta = (u0 * v1) + (v0 * u2) + (u1 * v2) - (v1 * u2) - (v0 * u1) - (u0 * v2); + const deltaA = (x0 * v1) + (v0 * x2) + (x1 * v2) - (v1 * x2) - (v0 * x1) - (x0 * v2); + const deltaB = (u0 * x1) + (x0 * u2) + (u1 * x2) - (x1 * u2) - (x0 * u1) - (u0 * x2); + const deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2); + const deltaD = (y0 * v1) + (v0 * y2) + (y1 * v2) - (v1 * y2) - (v0 * y1) - (y0 * v2); + const deltaE = (u0 * y1) + (y0 * u2) + (u1 * y2) - (y1 * u2) - (y0 * u1) - (u0 * y2); + const deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2); context.transform(deltaA / delta, deltaD / delta, deltaB / delta, deltaE / delta, @@ -352,20 +352,20 @@ */ renderMeshFlat(Mesh) { - let context = this.context; - let vertices = Mesh.vertices; + const context = this.context; + const vertices = Mesh.vertices; - let length = vertices.length/2; + const length = vertices.length/2; // this.count++; context.beginPath(); for (let i=1; i < length-2; i++) { // draw some triangles! - let index = i*2; + const index = i*2; - let x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; - let y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; + const x0 = vertices[index], x1 = vertices[index+2], x2 = vertices[index+4]; + const y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5]; context.moveTo(x0, y0); context.lineTo(x1, y1); diff --git a/src/mesh/NineSlicePlane.js b/src/mesh/NineSlicePlane.js index df10640..b179b10 100644 --- a/src/mesh/NineSlicePlane.js +++ b/src/mesh/NineSlicePlane.js @@ -5,7 +5,7 @@ /** * The NineSlicePlane allows you to stretch a texture using 9-slice scaling. The corners will remain unscaled (useful * for buttons with rounded corners for example) and the other areas will be scaled horizontally and or vertically - * + * *```js * let Plane9 = new PIXI.NineSlicePlane(PIXI.Texture.fromImage('BoxWithRoundedCorners.png'), 15, 15, 15, 15); * ``` @@ -44,7 +44,7 @@ { super(texture, 4, 4); - let uvs = this.uvs; + const uvs = this.uvs; // right and bottom uv's are always 1 uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1; uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1; @@ -102,14 +102,14 @@ } updateHorizontalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[9] = vertices[11] = vertices[13] = vertices[15] = this._topHeight; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - this._bottomHeight; vertices[25] = vertices[27] = vertices[29] = vertices[31] = this._height; } updateVerticalVertices() { - let vertices = this.vertices; + const vertices = this.vertices; vertices[2] = vertices[10] = vertices[18] = vertices[26] = this._leftWidth; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - this._rightWidth; vertices[6] = vertices[14] = vertices[22] = vertices[30] = this._width ; @@ -123,11 +123,11 @@ */ _renderCanvas(renderer) { - let context = renderer.context; + const context = renderer.context; context.globalAlpha = this.worldAlpha; - let transform = this.worldTransform; - let res = renderer.resolution; + const transform = this.worldTransform; + const res = renderer.resolution; if (renderer.roundPixels) { @@ -137,12 +137,12 @@ { context.setTransform(transform.a * res, transform.b * res, transform.c * res, transform.d * res, transform.tx * res, transform.ty * res); } - - let base = this._texture.baseTexture; - let textureSource = base.source; - let w = base.width; - let h = base.height; - + + const base = this._texture.baseTexture; + const textureSource = base.source; + const w = base.width; + const h = base.height; + this.drawSegment(context, textureSource, w, h, 0, 1, 10, 11); this.drawSegment(context, textureSource, w, h, 2, 3, 12, 13); this.drawSegment(context, textureSource, w, h, 4, 5, 14, 15); @@ -163,8 +163,8 @@ * @param textureSource * @param w width of the texture * @param h height of the texture - * @param x1 - * @param y1 + * @param x1 + * @param y1 * @param x2 * @param y2 * @private @@ -172,14 +172,14 @@ drawSegment(context, textureSource, w, h, x1, y1, x2, y2) { // otherwise you get weird results when using slices of that are 0 wide or high. - let uvs = this.uvs; - let vertices = this.vertices; - + const uvs = this.uvs; + const vertices = this.vertices; + let sw = (uvs[x2]-uvs[x1]) * w; let sh = (uvs[y2]-uvs[y1]) * h; let dw = vertices[x2] - vertices[x1]; let dh = vertices[y2] - vertices[y1]; - + // make sure the source is at least 1 pixel wide and high, otherwise nothing will be drawn. if (sw<1) { sw=1; @@ -213,7 +213,7 @@ this._width = value; this.updateVerticalVertices(); } - + /** * The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane @@ -231,7 +231,7 @@ this._height = value; this.updateHorizontalVertices(); } - + /** * The width of the left column @@ -245,13 +245,13 @@ set leftWidth (value) { this._leftWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[2] = uvs[10] = uvs[18] = uvs[26] = this._uvw * value; vertices[2] = vertices[10] = vertices[18] = vertices[26] = value; this.dirty=true; } - + /** * The width of the right column * @@ -264,13 +264,13 @@ set rightWidth(value) { this._rightWidth = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - this._uvw * value; vertices[4] = vertices[12] = vertices[20] = vertices[28] = this._width - value; this.dirty=true; } - + /** * The height of the top row @@ -284,13 +284,13 @@ set topHeight(value) { this._topHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[9] = uvs[11] = uvs[13] = uvs[15] = this._uvh * value; vertices[9] = vertices[11] = vertices[13] = vertices[15] = value; this.dirty=true; } - + /** * The height of the bottom row * @@ -303,12 +303,12 @@ set bottomHeight(value) { this._bottomHeight = value; - let uvs = this.uvs; - let vertices = this.vertices; + const uvs = this.uvs; + const vertices = this.vertices; uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - this._uvh * value; vertices[17] = vertices[19] = vertices[21] = vertices[23] = this._height - value; this.dirty=true; } } -export default NineSlicePlane; \ No newline at end of file +export default NineSlicePlane; diff --git a/src/mesh/Plane.js b/src/mesh/Plane.js index a1d7cdc..27182f6 100644 --- a/src/mesh/Plane.js +++ b/src/mesh/Plane.js @@ -46,24 +46,23 @@ */ refresh() { - let total = this.verticesX * this.verticesY; - let verts = []; - let colors = []; - let uvs = []; - let indices = []; - let texture = this.texture; + const total = this.verticesX * this.verticesY; + const verts = []; + const colors = []; + const uvs = []; + const indices = []; + const texture = this.texture; - let segmentsX = this.verticesX - 1; - let segmentsY = this.verticesY - 1; - let i = 0; + const segmentsX = this.verticesX - 1; + const segmentsY = this.verticesY - 1; - let sizeX = texture.width / segmentsX; - let sizeY = texture.height / segmentsY; + const sizeX = texture.width / segmentsX; + const sizeY = texture.height / segmentsY; - for (i = 0; i < total; i++) { + for (let i = 0; i < total; i++) { - let x = (i % this.verticesX); - let y = ( (i / this.verticesX ) | 0 ); + const x = (i % this.verticesX); + const y = ( (i / this.verticesX ) | 0 ); verts.push((x * sizeX), @@ -77,16 +76,16 @@ let totalSub = segmentsX * segmentsY; - for (i = 0; i < totalSub; i++) { + for (let i = 0; i < totalSub; i++) { - let xpos = i % segmentsX; - let ypos = (i / segmentsX ) | 0; + const xpos = i % segmentsX; + const ypos = (i / segmentsX ) | 0; - let value = (ypos * this.verticesX) + xpos; - let value2 = (ypos * this.verticesX) + xpos + 1; - let value3 = ((ypos+1) * this.verticesX) + xpos; - let value4 = ((ypos+1) * this.verticesX) + xpos + 1; + const value = (ypos * this.verticesX) + xpos; + const value2 = (ypos * this.verticesX) + xpos + 1; + const value3 = ((ypos+1) * this.verticesX) + xpos; + const value4 = ((ypos+1) * this.verticesX) + xpos + 1; indices.push(value, value2, value3); indices.push(value2, value4, value3); diff --git a/src/mesh/Rope.js b/src/mesh/Rope.js index 2a39aa6..74e156e 100644 --- a/src/mesh/Rope.js +++ b/src/mesh/Rope.js @@ -67,7 +67,7 @@ */ refresh() { - let points = this.points; + const points = this.points; // if too little points, or texture hasn't got UVs set yet just move on. if (points.length < 1 || !this._texture._uvs) @@ -75,14 +75,14 @@ return; } - let uvs = this.uvs; + const uvs = this.uvs; - let indices = this.indices; - let colors = this.colors; + const indices = this.indices; + const colors = this.colors; - let textureUvs = this._texture._uvs; - let offset = new core.Point(textureUvs.x0, textureUvs.y0); - let factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); + const textureUvs = this._texture._uvs; + const offset = new core.Point(textureUvs.x0, textureUvs.y0); + const factor = new core.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0); uvs[0] = 0 + offset.x; uvs[1] = 0 + offset.y; @@ -95,8 +95,8 @@ indices[0] = 0; indices[1] = 1; - let total = points.length, - index, amount; + const total = points.length; + let index, amount; for (let i = 1; i < total; i++) { diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 5161e02..eec70a6 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -44,7 +44,7 @@ // Making sure the batch size is valid // 65535 is max vertex index in the index buffer (see ParticleRenderer) // so max number of particles is 65536 / 4 = 16384 - let maxBatchSize = 16384; + const maxBatchSize = 16384; if (batchSize > maxBatchSize) { batchSize = maxBatchSize; } @@ -161,9 +161,7 @@ this.baseTexture = this.children[0]._texture.baseTexture; if(!this.baseTexture.hasLoaded) { - this.baseTexture.once('update', function(){ - this.onChildrenChange(0); - }, this); + this.baseTexture.once('update', () => this.onChildrenChange(0)); } } @@ -179,7 +177,7 @@ */ onChildrenChange(smallestChildIndex) { - let bufferIndex = Math.floor(smallestChildIndex / this._batchSize); + const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); if (bufferIndex < this._bufferToUpdate) { this._bufferToUpdate = bufferIndex; } @@ -198,8 +196,8 @@ return; } - let context = renderer.context; - let transform = this.worldTransform; + const context = renderer.context; + const transform = this.worldTransform; let isRotated = true; let positionX = 0; @@ -208,7 +206,7 @@ let finalWidth = 0; let finalHeight = 0; - let compositeOperation = renderer.blendModes[this.blendMode]; + const compositeOperation = renderer.blendModes[this.blendMode]; if (compositeOperation !== context.globalCompositeOperation) { context.globalCompositeOperation = compositeOperation; @@ -220,14 +218,14 @@ for (let i = 0; i < this.children.length; ++i) { - let child = this.children[i]; + const child = this.children[i]; if (!child.visible) { continue; } - let frame = child.texture.frame; + const frame = child.texture.frame; context.globalAlpha = this.worldAlpha * child.alpha; @@ -264,7 +262,7 @@ child.displayObjectUpdateTransform(); - let childTransform = child.worldTransform; + const childTransform = child.worldTransform; if (renderer.roundPixels) { @@ -296,7 +294,7 @@ finalHeight = frame.height; } - let resolution = child.texture.baseTexture.resolution; + const resolution = child.texture.baseTexture.resolution; context.drawImage( child.texture.baseTexture.source, diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 6808183..2c5a7e5 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -71,7 +71,7 @@ // Make copy of properties object so that when we edit the offset it doesn't // change all other instances of the object literal - property = + property = { attribute:property.attribute, size:property.size, @@ -108,12 +108,9 @@ */ initBuffers() { - let gl = this.gl; - let i; - let property; - + const gl = this.gl; let dynamicOffset = 0; - + let property; /** * Holds the indices of the geometry (quads) to draw @@ -126,7 +123,7 @@ this.dynamicStride = 0; - for (i = 0; i < this.dynamicProperties.length; i++) + for (let i = 0; i < this.dynamicProperties.length; i++) { property = this.dynamicProperties[i]; @@ -142,7 +139,7 @@ let staticOffset = 0; this.staticStride = 0; - for (i = 0; i < this.staticProperties.length; i++) + for (let i = 0; i < this.staticProperties.length; i++) { property = this.staticProperties[i]; @@ -160,13 +157,13 @@ this.vao = new glCore.VertexArrayObject(gl) .addIndex(this.indexBuffer); - for (i = 0; i < this.dynamicProperties.length; i++) + for (let i = 0; i < this.dynamicProperties.length; i++) { property = this.dynamicProperties[i]; this.vao.addAttribute(this.dynamicBuffer, property.attribute, gl.FLOAT, false, this.dynamicStride * 4, property.offset * 4); } - for (i = 0; i < this.staticProperties.length; i++) + for (let i = 0; i < this.staticProperties.length; i++) { property = this.staticProperties[i]; this.vao.addAttribute(this.staticBuffer, property.attribute, gl.FLOAT, false, this.staticStride * 4, property.offset * 4); diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 8fe6acf..3f3a4fe 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -55,7 +55,7 @@ */ onContextChange() { - let gl = this.renderer.gl; + const gl = this.renderer.gl; this.CONTEXT_UID = this.renderer.CONTEXT_UID; @@ -119,10 +119,10 @@ */ render(container) { - let children = container.children, - totalChildren = children.length, + const children = container.children, maxSize = container._maxSize, batchSize = container._batchSize; + let totalChildren = children.length; if(totalChildren === 0) { @@ -143,16 +143,16 @@ // if the uvs have not updated then no point rendering just yet! this.renderer.setBlendMode(container.blendMode); - let gl = this.renderer.gl; + const gl = this.renderer.gl; - let m = container.worldTransform.copy( this.tempMatrix ); + const m = container.worldTransform.copy( this.tempMatrix ); m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); this.shader.uniforms.projectionMatrix = m.toArray(true); this.shader.uniforms.uAlpha = container.worldAlpha; // make sure the texture is bound.. - let baseTexture = children[0]._texture.baseTexture; + const baseTexture = children[0]._texture.baseTexture; this.renderer.bindTexture(baseTexture); @@ -165,7 +165,7 @@ amount = batchSize; } - let buffer = buffers[j]; + const buffer = buffers[j]; // we always upload the dynamic buffer.uploadDynamic(children, i, amount); @@ -195,14 +195,13 @@ */ generateBuffers(container) { - let gl = this.renderer.gl, + const gl = this.renderer.gl, buffers = [], size = container._maxSize, batchSize = container._batchSize, - dynamicPropertyFlags = container._properties, - i; + dynamicPropertyFlags = container._properties; - for (i = 0; i < size; i += batchSize) + for (let i = 0; i < size; i += batchSize) { buffers.push(new ParticleBuffer(gl, this.properties, dynamicPropertyFlags, batchSize)); } @@ -288,7 +287,7 @@ { for (let i = 0; i < amount; i++) { - let spritePosition = children[startIndex + i].position; + const spritePosition = children[startIndex + i].position; array[offset] = spritePosition.x; array[offset + 1] = spritePosition.y; @@ -320,7 +319,7 @@ { for (let i = 0; i < amount; i++) { - let spriteRotation = children[startIndex + i].rotation; + const spriteRotation = children[startIndex + i].rotation; array[offset] = spriteRotation; @@ -345,7 +344,7 @@ { for (let i = 0; i < amount; i++) { - let textureUvs = children[startIndex + i]._texture._uvs; + const textureUvs = children[startIndex + i]._texture._uvs; if (textureUvs) { @@ -396,7 +395,7 @@ { for (let i = 0; i < amount; i++) { - let spriteAlpha = children[startIndex + i].alpha; + const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; array[offset + stride] = spriteAlpha; diff --git a/src/polyfill/Object.assign.js b/src/polyfill/Object.assign.js index 393240e..2c82308 100644 --- a/src/polyfill/Object.assign.js +++ b/src/polyfill/Object.assign.js @@ -2,7 +2,9 @@ // https://github.com/sindresorhus/object-assign // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign +import objectAssign from 'object-assign'; + if (!Object.assign) { - Object.assign = require('object-assign'); + Object.assign = objectAssign; } diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index de01915..643cf0e 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -103,14 +103,12 @@ */ tick() { - let i, len; - // Upload the graphics while(this.queue.length && this.numLeft > 0) { let item = this.queue[0]; let uploaded = false; - for (i = 0, len = this.uploadHooks.length; i < len; i++) + for (let i = 0, len = this.uploadHooks.length; i < len; i++) { if (this.uploadHooks[i](this.renderer, item)) { @@ -137,7 +135,7 @@ SharedTicker.remove(this.tick, this); let completes = this.completes.slice(0); this.completes.length = 0; - for (i = 0, len = completes.length; i < len; i++) + for (let i = 0, len = completes.length; i < len; i++) { completes[i](); } @@ -172,11 +170,10 @@ */ add(item) { - let i, len; // Add additional hooks for finding elements on special // types of objects that - for (i = 0, len = this.addHooks.length; i < len; i++) + for (let i = 0, len = this.addHooks.length; i < len; i++) { if (this.addHooks[i](item, this.queue)) { @@ -187,7 +184,7 @@ // Get childen recursively if (item instanceof core.Container) { - for (i = item.children.length - 1; i >= 0; i--) + for (let i = item.children.length - 1; i >= 0; i--) { this.add(item.children[i]); } @@ -274,7 +271,7 @@ } else if (item._texture && item._texture instanceof core.Texture) { - let texture = item._texture.baseTexture; + const texture = item._texture.baseTexture; if (queue.indexOf(texture) === -1) { queue.push(texture); @@ -303,4 +300,4 @@ core.WebGLRenderer.registerPlugin('prepare', WebGLPrepare); -export default WebGLPrepare; \ No newline at end of file +export default WebGLPrepare;